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

例如：



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    .box{

      width: 1200px;

      margin:30px auto;

    }

    .box > ul{

      width: 100%;

      display: flex;

      flex-wrap: wrap;

    }

    .box > ul >li{

      width: 300px;

      height: 300px;

      display: block;

      border:1px solid #ccc;

      box-sizing: border-box;

      margin: 20px;

    }

    .box > ul >li >a{

      width: 100%;

      height: 100%;

      box-sizing: border-box;

      display: block;

      background: url("../img/jingling.jpg");

      background-repeat: no-repeat;

      padding:47px;

      background-origin: content-box;

      background-clip: content-box;
　　/* 通过这三个值可以设置只展示背景图片的一部分 */

    }

    .box > ul >li:nth-of-type(1) >a{

    }

    .box > ul >li:nth-of-type(2) >a{

      background-position: -226px 0;

    }

    .box > ul >li:nth-of-type(3) >a{

      background-position: -457px 0;

    }

    .box > ul >li:nth-of-type(4) >a{

      background-position: 0 -226px;

    }

    .box > ul >li:nth-of-type(5) >a{

      background-position: -226px -226px;

    }

    .box > ul >li:nth-of-type(6) >a{

      background-position: -457px -226px;

    }

    .box > ul >li:nth-of-type(7) >a{

      background-position: 0 -226px;

    }

    .box > ul >li:nth-of-type(8) >a{

      background-position: -226px -226px;

    }

    .box > ul >li:nth-of-type(9) >a{

      background-position: -457px -226px;

    }

  </style>

</head>

<body>

  <div class="box">

    <ul>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

      <li><a href=""></a></li>

    </ul>

  </div>

</body>

</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. QML使用moveToThread线程【QML工程使用C++】

    一.需求来源 对于使用Qt线程,有两种方式,见本人其他文章:https://www.cnblogs.com/judes/p/6884964.html 个人认为QObject::moveToThread ...

  2. CentOS7下搭建zabbix监控（五）——Web端配置自动发现并注册

    好像有点问题,没法自动添加主机,我后期再测测 (1).自动发现主机并注册 1)创建发现规则 2)编辑自动发现规则信息(这两步不配置问题也不大,因为在动作中也有主机IP地址) 3)添加自动发现的动作 4 ...

  3. SringCloud学习成长之路 八 消息总线

    Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...

  4. 多林环境中的ADFS

    公司有两个或更多Active Directory林,但是只有一个ADFS,如何让ADFS支持多个域林呢?(一个ADFS只能部署在一个域中,不能跨域) 答案是:在部署ADFS的林和所有其他林之间建立双向 ...

  5. Python源码编译安装，supervisor配置管理

    apt-get remove 会删除软件包而保留软件的配置文件 apt-get purge 会同时清除软件包和软件的配置文件 virtualenv -p /usr/local/bin/python3. ...

  6. CentOS 7 vi详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  7. tp5博客项目实战1

    tp5博客项目实战 开发准备:环境wamp,windows系统为例.看实战博客,默认会搭建开发环境并且tp5框架已经至少有一定的基础. tp5的下载与安装 方法一:直接在官网下载拷贝到wamp你的项目 ...

  8. 八个免费的Vue图标库

    1. Vue-awesome 也许大家知道 Font-awesome 之类比较流行的图标库,就像各大组件库都有各自版本一样,它也有Vue的版本 Github地址:https://github.com/ ...

  9. cent8安装postgres

    postgres是一款免费.开源的对象型关系数据库,其在cent8的安装方式与cent7的不太一样,特此记录. 步骤: 1 安装postgres server dnf install postgres ...

  10. Java的设计模式（2）--单例模式

    保证一个类仅有一个实例,并提供一个访问它的全局访问点. 好处:    (1)频繁使用的对象,可以省略new操作花费的时间,这对于那些重量级对象而言,是非常客观的一笔开销.    (2)由于new的次数 ...