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. 阿里云发布Apsara SA系列混合云存储阵列

    3月21日,2019北京阿里云峰会上,阿里云正式发布Apsara SA系列混合云存储阵列,融合IP SAN,FC SAN,NAS和OSS对象存储协议于一体,同时实现了本地数据中心架构和公共云存储的无缝 ...

  2. MaxCompute助力小影短视频走向全球化

    数字时代,中国已经成为世界互联网的中心,小影(海外版称作为VivaVideo,后简称VivaVideo)作为国内首批短视频出海企业,借助统一的云计算平台快速实现全球业务的线上部署,已经让每一行代码都获 ...

  3. 1-1.go开发工具安装

    (1) (2) bin:go的可执行文件 src:go的源代码 (3)安装开发工具 安装:goland-2018.1.1.exe 将.jar文件复制到工具的bin目录下   用记事本打开“goland ...

  4. 【转载】Ubuntu终端常用的快捷键

    Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷键如下: 快捷键 功能 Ta ...

  5. LeetCode109 Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  6. Codeforces Round #323 (Div. 2) Once Again... CodeForces - 582B 最长非下降子序列【dp】(不明白)

    B. Once Again... time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  7. 2019-2-27-如何替换一个-exe-的图标

    title author date CreateTime categories 如何替换一个 exe 的图标 lindexi 2019-02-27 20:33:16 +0800 2019-2-27 2 ...

  8. SDUT-3340_数据结构实验之二叉树一:树的同构

    数据结构实验之二叉树一:树的同构 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给定两棵树T1和T2.如果T1可以通过 ...

  9. GP-荧光免疫分析仪SDK 协议

    近期,闲来无事,得到一款GP的poct设备研究了下,该设备型号:Getein1100 ,串口进行通信,但是串口连接有所限制,于是找到一款数传模块,将串口转网口,使用pc进行通信抓包分析,如下: 在此可 ...

  10. oracle函数 NEW_TIME(dt1,c1,c2)

    [功能]:给出时间dt1在c1时区对应c2时区的日期和时间 [参数]:dt1,d2 日期型 [返回]:日期时间 [参数]:c1,c2对应的 时区及其简写 大西洋标准时间:AST或ADT 阿拉斯加_夏威 ...