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
随机推荐
- Linux的一些简单命令操作总结
防火墙 查看防火墙状态 systemctl status iptables (或service iptables status) 关闭防火墙 systemctl stop iptables(或serv ...
- jQuery动态加载动画spin.js
在线演示 本地下载
- (六)IO流之过滤流
过滤字节流FilterInputStream和FilterOutputStream BufferedInputStream和BufferedOutputStream 需要使用已存在的节点流来构造 ...
- ggplot2笔记
ggplot2笔记 下面是ggplot2的一些文档和github上的源代码http://docs.ggplot2.org/current/https://github.com/hadley/ggplo ...
- 如何实现两个input框的同步更新
class MVVM { constructor(options) { this.$options = options; this.$el = options.el; this.$data = opt ...
- javascript中字符的一些常规操作
1,获取第一个字符 var str = "hello word"; console.log(str[0]); // h 2,获取最后一个字符 var str = "hel ...
- mybatis分页插件pageHelper简单实用
工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency ...
- 00docker安装和简介
Docker是用于开发.装载和运行应用的开放平台.Docker项目的目标是实现轻量的操作系统级虚拟化解决方案,它提供了一种在容器中安全隔离地运行应用程序的方式.可以在宿主机上运行多个容器. Docke ...
- oracle函数 TRANSLATE(c1,c2,c3)
[功能]将字符表达式值中,指定字符替换为新字符 [说明]多字节符(汉字.全角符等),按1个字符计算 [参数] c1 希望被替换的字符或变量 c2 查询原始的字符集 c3 替换新的字符集,将 ...
- CCPC final Cockroaches
算法假了,我想的是通过枚举x,删除y的影响,这样答案第一个是没有任何问题的,但是第二个会算重复. 因为我枚举每一个x的时候,得到的y,而算另外一个x的时候,可能已经通过其他的点选到了这个点y这就有点麻 ...