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. FlowLayout实现

    package com.loaderman.customviewdemo; import android.content.Context; import android.util.AttributeS ...

  2. win10下安装Kafka

    去kafka官网(http://kafka.apache.org/downloads.html)下最新包(目前是2.3.0),不分操作系统,直接点二进制压缩包链接跳过去下载即可 -> 解压到你指 ...

  3. MySQL数据库备份之xtrabackup工具使用

    一.Xtrabackup备份介绍及原理 二.Xtrabackup的安装 1.在centos7上基于yum源安装percona-xtrabackup软件 [root@node7 ~]# yum -y i ...

  4. 各种修改Mysql字符集

    以下方法最好在没有数据时操作,否则有可能导致乱码.如果已有数据,做好备份尝试Mysql迁移由于字符集导致乱码的数据 创建测试环境 mysql> create database test_db; ...

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

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

  6. PAT 甲级 1053 Path of Equal Weight (30 分)（dfs，vector内元素排序，有一小坑点）

    1053 Path of Equal Weight (30 分)   Given a non-empty tree with root R, and with weight W​i​​ assigne ...

  7. 第一个php文件运行

    运行会发现报错,解决参考:写的很详细 http://blog.csdn.net/meegomeego/article/details/36020553

  8. IDEA的查询引用、调用关系图的功能(转)

    转自: http://www.cnblogs.com/ghj1976/p/5382455.html Eclipse的"Call Hierarchy"可以查看一个Java方法或类成员 ...

  9. 机器学习_第一节_numpy

    今天学了机器学习第一节, 希望能够坚持下去,其实不在乎课程是什么?关键要坚持下去 今天主要学了对矩阵的一些操作, 用的库是numpy 开始从头到尾捋一遍, 作者说的很有道理,学计算机,动手能力要强,所 ...

  10. [学习笔记] 在Eclipse中添加用户库 Add User Libraries ，在项目中引用用户库

    如果还没有安装Eclipse, 则请参考前文:  [学习笔记] 下载.安装.启动 Eclipse(OEPE) 添加用户库 本文主要介绍在项目中直接使用第三方库的情况.就是把第三方的jar文件直接放到某 ...