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的用法的更多相关文章

  1. 对background: url("~assets/img/common/collect.svg") 0 0/14px 14px 的理解

    需求:给收藏数字前面通过::before伪元素添加图标 相关代码: .goods-info .collect { position: relative; } .goods-info .collect: ...

  2. background:url() 背景图不显示

    奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...

  3. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  4. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  5. css background url 路径

    刚刚碰到一个奇怪的问题,这样一段CSS代码: 1 .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  6. Django中CSS加载background url('')问题

    Django中CSS加载background url('')问题   在django中, 默认CSS中如果有 background url('images/a.jpg') 这类的属性,会被django ...

  7. MVC action 执行两次 background url()

    大年初七第一天上班就来解决问题,我也是醉了. 其实是历史遗留问题,今天看到后不能忍了,赶紧解决一下. 旧系统中以一个微信版本的列表页面没有问题,在新系统中重新开发一边后发现列表页面的action总是请 ...

  8. orcal数据库得连接必须用localhost,url中不要用127.0.0.1,不然无法连接

    orcal数据库得连接必须用localhost,url中不要用127.0.0.1,不然无法连接,

  9. 黑猫关键词URL采集工具 Pro v1.0

    功能介绍:黑猫关键词URL采集工具 Pro v1.0 批量关键词自动搜索采集 自动去除垃圾二级泛解析域名 可设置是否保存域名或者url 联系客服QQ:944520563

随机推荐

  1. Linux的一些简单命令操作总结

    防火墙 查看防火墙状态 systemctl status iptables (或service iptables status) 关闭防火墙 systemctl stop iptables(或serv ...

  2. jQuery动态加载动画spin.js

    在线演示 本地下载

  3. (六)IO流之过滤流

    过滤字节流FilterInputStream和FilterOutputStream BufferedInputStream和BufferedOutputStream    需要使用已存在的节点流来构造 ...

  4. ggplot2笔记

    ggplot2笔记 下面是ggplot2的一些文档和github上的源代码http://docs.ggplot2.org/current/https://github.com/hadley/ggplo ...

  5. 如何实现两个input框的同步更新

    class MVVM { constructor(options) { this.$options = options; this.$el = options.el; this.$data = opt ...

  6. javascript中字符的一些常规操作

    1,获取第一个字符 var str = "hello word"; console.log(str[0]); // h 2,获取最后一个字符 var str = "hel ...

  7. mybatis分页插件pageHelper简单实用

    工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency ...

  8. 00docker安装和简介

    Docker是用于开发.装载和运行应用的开放平台.Docker项目的目标是实现轻量的操作系统级虚拟化解决方案,它提供了一种在容器中安全隔离地运行应用程序的方式.可以在宿主机上运行多个容器. Docke ...

  9. oracle函数 TRANSLATE(c1,c2,c3)

    [功能]将字符表达式值中,指定字符替换为新字符 [说明]多字节符(汉字.全角符等),按1个字符计算 [参数] c1   希望被替换的字符或变量 c2   查询原始的字符集 c3   替换新的字符集,将 ...

  10. CCPC final Cockroaches

    算法假了,我想的是通过枚举x,删除y的影响,这样答案第一个是没有任何问题的,但是第二个会算重复. 因为我枚举每一个x的时候,得到的y,而算另外一个x的时候,可能已经通过其他的点选到了这个点y这就有点麻 ...