background:url(./images.png) no-repeat 0 center的用法
background:url(./images.png) no-repeat 0 center; //图像地址 不重复 水平位置0 垂直位置居中
background:url(./images.png) no-repeat -10px -5px;
background:url(./images.png) no-repeat 0 center;
的意思是 图像地址 不重复 水平位置0 垂直位置居中
0 center 的意思就是 水平位置0 垂直位置居中
-10px -2px 的意思就是 水平位置-10px 垂直位置-2px
这两个值和background-position 属性是一样的,即设置背景图像的起始位置。
这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
默认值:0% 0%
可能的值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right (以上,如果您仅规定了一个关键词,那么第二个值将是"center"。)
x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)
mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。)
您可以混合使用 % 和 position 值。
作者:tianlinzhao
链接:https://www.jianshu.com/p/a32ce8714b1d
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
background:url(./images.png) no-repeat 0 center的用法的更多相关文章
- 对background: url("~assets/img/common/collect.svg") 0 0/14px 14px 的理解
需求:给收藏数字前面通过::before伪元素添加图标 相关代码: .goods-info .collect { position: relative; } .goods-info .collect: ...
- background:url() 背景图不显示
奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...
- background: url 背景图片加时间戳不显示图片
在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...
- CSS中background:url(图片) 不能显示的问题
刚刚碰到一个奇怪的问题,这样一段CSS代码: .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
- css background url 路径
刚刚碰到一个奇怪的问题,这样一段CSS代码: 1 .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
- Django中CSS加载background url('')问题
Django中CSS加载background url('')问题 在django中, 默认CSS中如果有 background url('images/a.jpg') 这类的属性,会被django ...
- MVC action 执行两次 background url()
大年初七第一天上班就来解决问题,我也是醉了. 其实是历史遗留问题,今天看到后不能忍了,赶紧解决一下. 旧系统中以一个微信版本的列表页面没有问题,在新系统中重新开发一边后发现列表页面的action总是请 ...
- orcal数据库得连接必须用localhost,url中不要用127.0.0.1,不然无法连接
orcal数据库得连接必须用localhost,url中不要用127.0.0.1,不然无法连接,
- 黑猫关键词URL采集工具 Pro v1.0
功能介绍:黑猫关键词URL采集工具 Pro v1.0 批量关键词自动搜索采集 自动去除垃圾二级泛解析域名 可设置是否保存域名或者url 联系客服QQ:944520563
随机推荐
- metro扁平UI网页组件
在线演示 本地下载
- Linux进程管理(三、 线程)
// ---- refer glibc, pthread_create.c ----// int __pthread_create_2_0 (newthread, attr, start_routin ...
- js错误处理Try-catch和throw
1.try-catch语句 Try{ //可能会导致错误的代码 }catch(error){ //在错误发生时怎么处理 } 例如: try{ window.someNonexistentFunct ...
- 实用的cmd命令
1.打开iis服务器:inetmgr 2.远程连接:mstsc 3.注册表:regedit.exe
- 2017 ACM-ICPC 亚洲区(西安赛区)网络赛: B. Coin 【概率题】【数论】
Bob has a not even coin(就是一个不均匀的硬币,朝上的概率不一定是1/2), every time he tosses the coin, the probability tha ...
- re模块下的常用方法
一 : re模块的查找 findall 优先级查找 返回列表 找所有的匹配项(从大段的内容中找匹配到的项目) import re str = "qwer asdf zxcv qwer ...
- chrome谷歌浏览器怎么清除指定网站cookie
https://jingyan.baidu.com/article/fa4125aced30cc28ac709230.html 在使用电脑的情况下,由于到部分网站的cookie的问题导致的部分功能失效 ...
- Getting started with the basics of programming exercises_4
1.编写一个删除C语言程序中所有的注释语句的程序.要正确处理带引号的字符串与字符串常量,C语言中程序注释不允许嵌套. #include<stdio.h> void rcomment(int ...
- hdu 1596 find the safest road (变形SP && dij+heap)
Problem - 1596 变形最短路问题,给出邻接矩阵,要求求出给定点对间安全率最大值. 这题可以用dijkstra+heap来做.对于每一个查询,做一次dij即可. 代码如下: #include ...
- PHP 内存管理及垃圾回收机制
PHP5的内存管理 对象传递 PHP5使用了Zend引擎II,对象被储存于独立的结构Object Store中,而不像其它一般变量那样储存于Zval中(在PHP4中对象和一般变量一样存储于Zval). ...