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. No.4 Verilog 表达式

    4-1 操作数 常数.参数.线网.变量.位选.存储器.数组. *部分位选: integer mark; :] inst; :] gpio; inst[mark+ : ] //选择 mark,mark+ ...

  2. python 缓冲区 subprocess 黏包 黏包解决方案

    一.缓冲区 二.两种黏包现象 两种黏包现象: 1 连续的小包可能会被优化算法给组合到一起进行发送 黏包现象1客户端 import socket BUFSIZE = 1024 ip_prort = (' ...

  3. python 常见包中的不定参数

  4. OpenJudge_1477:Box of Bricks

    描述 Little Bob likes playing with his box of bricks. He puts the bricks one upon another and builds s ...

  5. BZOJ 4034 洛谷3178 树上操作题解

    一个很裸的树链剖分模板.注意一下数据范围,有的地方要开longlong,这就是唯一的陷阱了. # include<iostream> # include<cstdio> # i ...

  6. Java面向对象----String对象的声明和创建

    String a="abcd"  相等  String b="abcd" String a=new String("abcd")   不等于 ...

  7. 从零学React Native之07View

    View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...

  8. @AGC037 - E@ Reversing and Concatenating

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 且只包含小写字母的字符串 S ,你可以执行 ...

  9. 网上很多laravel中cookie的使用方法。

    https://blog.csdn.net/chen529834149/article/details/75244718 概述 Cookie的添加其实很简单,直接使用Cookie::make(),在使 ...

  10. Best Open Source Software

    Best Open Source Software Open Source, Software, Top The promise of open source software is best qua ...