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. iOS8.0如何使用Touch ID来做验证

    对于Objective-C而言,只要几行代码即可搞定. 比如: #import <LocalAuthentication/LocalAuthentication.h> - (void)vi ...

  2. ARM 之一 ELF文件、镜像（Image）文件、可执行文件、对象文件 详解

    [转]https://blog.csdn.net/ZCShouCSDN/article/details/100048461 ELF 文件规范   ELF(Executable and Linking ...

  3. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_09-课程详情页面静态化-静态页面测试

    4 课程详情页面静态化 4.1 静态页面测试 4.1.1 页面内容组成 我们在编写一个页面时需要知道哪些信息是静态信息,哪些信息为动态信息,下图是页面的设计图: 打开静态页面,观察每部分的内容. 红色 ...

  4. Qt编写自定义控件38-高亮按钮

    一.前言 高亮按钮控件,既可以作为类似于交通指示灯使用,也可以作为设备状态指示灯使用,控件内置多套颜色风格,还可以自己设置颜色风格,按钮可以增加文字显示,非常适合需要在状态设备上显示小量的文字展示,按 ...

  5. SpringCloud学习成长之 十一 Docker部署cloud项目

    一.docker简介 Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机). ...

  6. 【Leetcode_easy】709. To Lower Case

    problem 709. To Lower Case solution1: class Solution { public: string toLowerCase(string str) { stri ...

  7. VMware VSAN 设计规则

    1.集群节点数量:3-64台主机(生产环境最少4节点起,5.5版本支持32节点,6.0版本支持64节点),配置万兆网卡,主机规格应满足VSAN兼容性要求. 2.每台主机需配置磁盘组,每台主机的磁盘组数 ...

  8. php验证码实例

    验证码实例如下看不懂的先看gd库的那一篇,session不懂的看from提交的数据都哪里了那一篇,欢迎关注 index.php <!DOCTYPE html> <html lang= ...

  9. Windows Server 2012 R2蓝屏

    最近发现某个医院客户Windows Server 2012 R2 DataCenter的系统频繁蓝屏重启,重启没过一天再一次出现,反反复复折腾好几天,提示信息ntoskrnl.exe.mssmbios ...

  10. 李宗盛 linux罚写

    1.system v init运行级别及作用 init运行级别 作用 0 关机 1 单用户模式 2 多用户的文本界面 3 多用户的文本界面 4 多用户的文本界面 5 多用户的图形界面 6 重启 eme ...