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. WGS84 2 GCJ-02

    #include ; ) { x=-x; ff=; } cc=) ff=; ) ff=; } x=tt; ss=x; s2=x; tt=tt*tt; s2=s2*tt; ss=ss-s2* ) ss= ...

  2. REUSE_ALV_POPUP_TO_SELECT使用技巧

    可以实现弹出一个对话框,提供选择数据的功能…… 栗子1: CALL FUNCTION 'REUSE_ALV_POPUP_TO_SELECT' TYPE-POOLS slis. DATA: selec ...

  3. ABAP程序并行处理

    CASE1. 程序中 start new task ,并在后面获取处理结果 *"------------------------------------------------------- ...

  4. 云计算和 AWS 概述（一）

    目录 云计算基础 概念 优势 云计算分类 AWS简介 服务概述 AWS 核心服务 AWS 平台服务 AWS开发和操作服务 AWS 数据中心和可用区(AZ) 区域 可用区 区域名 AWS 云适应框架 ( ...

  5. 当你登录Github要求你邮箱验证身份，但是你的邮箱登录不了？

    事情发送在两天前,我如标题所示......,它给出的tyningling@163我真的不知道什么时候注册的了,尝试了N个密码登录不上,验证密保吧,看到手机号突然想起来,这是拿以前同学的手机号注册的.. ...

  6. 【计算机视觉】Objectness算法（一）---总体理解，整理及总结

    1.源码下载及转换为VS2012 WIN32版本. http://www.cnblogs.com/larch18/p/4560690.html 2.原文: http://wenku.baidu.com ...

  7. CenOS 7 安装JDK

    1.输入安装命令 yum install java-1.8.0-openjdk-devel.x86_64

  8. 配置node低版本支持ES7

    由于node的版本为6.*,不升级情况下,能使用ES7的 async await 特性, 在目录下 添加 start.js package.json里添加依赖配置 重新npm install 下载依赖 ...

  9. 彻底理解js中this的指向，不必硬背(转)

    转自: http://www.h5cn.com/js/jishu/2016/0226/18248.html 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定th ...

  10. [翻译向] 当flush privileges生效时

    #前言: 最近频繁在mysql权限控制这里栽跟斗,在翻阅了一些资料之后,简单地翻译一下官网关于flush privileges的描述,抛砖引玉.   #翻译正文: If the mysqld serv ...