1. background
  1. 1.设置背景平铺
    background-repeat 
    round ：图片会进行缩放后平铺
    space : 图片会进行平铺,中间留下空白空间
  1. 注：当滚动行为设为fixed,round和space没有效果
  1. 2.设置滚动时的行为
    background-attachment
    scroll：父元素滚动时，跟随滚动；子元素滚动时，不跟随滚动。背景图片跟随父元素滚动
    local：父元素滚动时，跟随滚动；子元素滚动时，跟随滚动。背景图片一直跟随滚动
    fixed：父元素滚动时，不跟随滚动；子元素滚动时，不跟随滚动。背景图片固定不变
  1. 3.设置图片尺寸
    background-size：宽度,高度
    值/auto
    如果设置成百分比的话，就是参照父容器的宽度和高度来
    contains ：会按比例变换大小，使图片全部在容器内，同时自适应容器大小
    　　如果图片大于容器，会造成空白
    　　如果图片小于容器 会放大图片
    cover 背景图片会按比列缩放或扩大，会使图片充满容器
    4.设置背景图片原点
    background-origin
    border-box：图片从border开始填充
    padding-box：图片从border开始填充
    content-box：图片从content开始填充
    5.设置图片裁切区域
    background-clip
    border-box：图片显示border以内的内容
  1. padding-box：图片显示padding以内的内容
    content-box：图片显示content以内的内容
  1. background-origin 和background-clip 可以提升用户的响应区域

  1. 例如：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.   <style>
  7.     .box{
  8.       width: 1200px;
  9.       margin:30px auto;
  10.     }
  11.     .box > ul{
  12.       width: 100%;
  13.       display: flex;
  14.       flex-wrap: wrap;
  15.     }
  16.     .box > ul >li{
  17.       width: 300px;
  18.       height: 300px;
  19.       display: block;
  20.       border:1px solid #ccc;
  21.       box-sizing: border-box;
  22.       margin: 20px;
  23.     }
  24.     .box > ul >li >a{
  25.       width: 100%;
  26.       height: 100%;
  27.       box-sizing: border-box;
  28.       display: block;
  29.       background: url("../img/jingling.jpg");
  30.       background-repeat: no-repeat;
  31.       padding:47px;
  32.       background-origin: content-box;
  33.       background-clip: content-box;
    　　/* 通过这三个值可以设置只展示背景图片的一部分 */
  34.     }
  35.     .box > ul >li:nth-of-type(1) >a{
  36.  
  37.     }
  38.     .box > ul >li:nth-of-type(2) >a{
  39.       background-position: -226px 0;
  40.     }
  41.     .box > ul >li:nth-of-type(3) >a{
  42.       background-position: -457px 0;
  43.     }
  44.     .box > ul >li:nth-of-type(4) >a{
  45.       background-position: 0 -226px;
  46.     }
  47.     .box > ul >li:nth-of-type(5) >a{
  48.       background-position: -226px -226px;
  49.     }
  50.     .box > ul >li:nth-of-type(6) >a{
  51.       background-position: -457px -226px;
  52.     }
  53.     .box > ul >li:nth-of-type(7) >a{
  54.       background-position: 0 -226px;
  55.     }
  56.     .box > ul >li:nth-of-type(8) >a{
  57.       background-position: -226px -226px;
  58.     }
  59.     .box > ul >li:nth-of-type(9) >a{
  60.       background-position: -457px -226px;
  61.     }
  62.   </style>
  63. </head>
  64. <body>
  65.   <div class="box">
  66.     <ul>
  67.       <li><a href=""></a></li>
  68.       <li><a href=""></a></li>
  69.       <li><a href=""></a></li>
  70.       <li><a href=""></a></li>
  71.       <li><a href=""></a></li>
  72.       <li><a href=""></a></li>
  73.       <li><a href=""></a></li>
  74.       <li><a href=""></a></li>
  75.     </ul>
  76.   </div>
  77. </body>
  78. </html>

background 背景图片 --css3的更多相关文章

  1. 解决android:background背景图片被拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  2. ie8 background背景图片不显示问题

    在chrome,FF可以显示,但是在ie8背景图片显示不出来 css改为如下可以正常显示: background: url(../images/goods.png) no-repeat !import ...

  3. background 背景图片 在IE8中不显示解决方法

    我给ul加了一个背景图片 background 火狐 ie9 ch都显示.唯独在IE8中不显示 之前的样式代码 background: url( rgba(, , , ); 在ie8中改成 backg ...

  4. 有关background 背景图片不能显示

    首先有两个概念 绝对路径,从根目录为起点到你所在的目录: 相对路径,从一个目录为起点到你所在的目录. 例如:              ┍ A文件夹           C -|            ...

  5. table中background背景图片自动拉伸

    <table  background="login/image/jiaozhouwan.jpg" style="background-size: 100% 100% ...

  6. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  7. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  8. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  9. background属性冲突导致的部分浏览器背景图片不显示问题

    前几天在项目中遇到了一个让人摸不着头脑的bug,测试说页面显示有点问题并发了截图, 正常的显示状态是这样 首先我自信地用自己的手机检查了一下,没有问题,问清楚后得知是UC浏览器中出现的,UC的内核是u ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_12-用户退出-服务端

    实现退出 用户退出要以下动作: 1.删除redis中的token 2.删除cookie中的token controller内定义 spring securety config内放行 对这个url放行 ...

  2. ES6内建对象的继承

    在ES6之前, JS是无法通过继承的方式创建属于自己的特殊数组的, 也就是说可以使用原型链来继承数组的一些方法, 但是某些返回一个数组的方法返回的值还是一个Array的实例, 例如slice, len ...

  3. CentOS7下JSP连接Mysql

    实验环境如下: youxi1 CentOS7.5 Tomcat8.5.35 192.168.5.101 youxi2 CentOS7.5 Mysql5.7.20 192.168.5.102 (1).下 ...

  4. 利用Python获取cookie的方法,相比java代码简便不少

    1.通过urllib库,是python的标准库,不需要另外引入,直接看代码,注意代码的缩进: # coding=UTF-8import cookielibimport urllib2 class Ry ...

  5. QuickText for Notepad++

    昨刚投入新欢Notepad++,思路如泉涌,码代码也不累了,一口气用她码了两篇文- 今再接再厉,继续.QuickText严格说来算不上什么神器级插件,也仅只是一个缩写快捷输入的插件而已.可用得好,那效 ...

  6. destoon 6.0 手机站支持在所有浏览器访问

    我们的在本地调试destoon 6.0的手机站模板时,用浏览器的自带审查元素很不方便. 可是destoon 默认是在电脑端打不开手机站,如果这个设置能够去除掉,那就可以了. 去掉这个限制,指需要两步 ...

  7. 图形学入门(1)——直线生成算法（DDA和Bresenham）

    开一个新坑,记录从零开始学习图形学的过程,现在还是个正在学习的萌新,写的不好请见谅. 首先从最基础的直线生成算法开始,当我们要在屏幕上画一条直线时,由于屏幕由一个个像素组成,所以实际上计算机显示的直线 ...

  8. CSS History

    Preface 如果只是要写程序,那的确是不需要这么麻烦,上来直接看Syntax,动手写上至少300行代码,做上3个应用程序,这门语言你也就差不多会用了,接下来不过就是模式,特殊的地方以及记住一些函数 ...

  9. 【C/C++开发】内存对齐(内存中的数据对齐)、大端模式及小端模式

    数据对齐,是指数据所在的内存地址必须是该数据长度的整数倍.DWORD数据的内存起始地址能被4除尽,WORD数据的内存起始地址能被2除尽.X86 CPU能直接访问对齐的数据,当它试图访问一个未对齐的数据 ...

  10. 彻底理解JavaScript中的prototype、__proto__

    虽然在JavaScript里一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象和函数两大类.在此基础上,JavaScript的原型链逻辑遵从以下通用规则: 对象有__pro ...