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
随机推荐
- Directx11教程36 纹理映射(6)
原文:Directx11教程36 纹理映射(6) 本章主要是整理代码,做以下两件事情: 1.把世界坐标矩阵的计算,放在GraphicsClass的渲染函数中,之前放在D3DClass中,而且只是 ...
- SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作)
SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作) 2012-12-21 未来决定... http://www.ebama.net/thread-107643-1-1.html ...
- 【C++】关于map的遍历 删除
int main(int argc, char* argv[]) { map<string, string> mapData; mapData["a"] = " ...
- poj1637&&hdu1956 混合欧拉回图判断
欧拉路:经过所有路有且仅有1次,可以路过所有的点. 无向图: 图连通,所有点都是偶数度,或者只有两个点是奇数度.当所有点是偶数度时欧拉路起点可以是任意点:当有两个奇数度点时起点必须是奇数度点. 有向 ...
- FastAdmin 开发第 4 天:初试命令行
FastAdmin 最强大的是命令行 先从 test 表开始. 在 FastAdmin 默认有一个 test 表格,用于命令行 crud 测试. 如何开始? 只需要在项目命令行中输入以下命令就会自动生 ...
- 查看JAVA占用CPU高的线程日志
# . 查看主进程占用cpu高 top # java # . 按照线程占用cpu由高到低进行排查: -o THREAD,tid, # USER %CPU PRI SCNT WCHAN USER SYS ...
- Spring读取mybatis在多个jar包下的的mapper文件
刚开始的时候我的配置文件在同名目录下都是在/mapper下,导致只能读取一个jar中的mapper文件.先解决如下: 1.将mapper文件放在不能放在同名的目录下. 比如:user. ...
- @codeforces - 1221G@ Graph And Numbers
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 边的无向图. 现在要求给每个点写上 0 或 ...
- C语言中内存的管理
一.动态内存分配与释放 1.为什么要使用动态内存分配,以下看一个实例,关于超市中购买记录的一段程序 #include <stdio.h> #include <string.h> ...
- [ZJOI2007] 小Q的矩阵游戏 (模板—Dinic)
B. 矩阵游戏 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行 ...