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. PorterDuffXfermode之PorterDuff.Mode.SRC_OUT

    package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...

  2. webpack概述——资源、样式、图片的打包工具

    官方地址:https://www.webpackjs.com/ Concepts At its core, webpack is a static module bundler for modern ...

  3. 关于类似QQ的展开和折叠效果的实现

    介绍: 1.两级折叠与展开: 实现原理如下: 1>通过表视图的组的头视图和单元格实现; 2>通过改变cell的高度实现; 3>通过cell实现; 实现 UITableView 的ce ...

  4. mysql使用truncate截断带有外键的表时报错--解决方案

    报错内容如:1701 - Cannot truncate a table referenced in a foreign key constraint 一.为什么要使用truncate 使用trunc ...

  5. 修改centos7命令行控制台屏幕分辨率

    1) vi /etc/sysconfig/grub 2)  GRUB_CMDLINE_LINUX 在rhgb前加 vga=0x0317  (317为分辨率编码) 3) grub2-mkconfig - ...

  6. Egret入门学习日记 --- 第十一篇（书中 4.1~4.6节 内容）

    第十一篇(书中 4.1~4.6节 内容) 好了,到了这篇开始,前三章都记录完了. 接下来就是到第四章了. 4.1节 的内容总结一下重点: 1.resource目录下default.res.json文件 ...

  7. 【C/C++开发】运算符重载二

    C++中预定义的运算符的操作对象只能是基本数据类型.但实际上,对于许多用户自定义类型(例如类),也需要类似的运算操作.这时就必须在C++中重新定义这些运算符,赋予已有运算符新的功能,使它能够用于特定类 ...

  8. super的实例及实现原理

    super实例 class A(): def go(self): print ("go A go!") def stop(self): print ("stop A st ...

  9. MySQL（六） 索引

    索引与优化 1.选择索引的数据类型 MySQL支持很多数据类型,选择合适的数据类型存储数据对性能有很大的影响.通常来说,可以遵循以下一些指导原则: (1)越小的数据类型通常更好:越小的数据类型通常在磁 ...

  10. Redis学习笔记（一）：Redis的数据类型

    之前笔者常常接触的数据库是关系型数据库,其中MySQL接触居多.近年来NoSQL兴起,各种新型数据库不断诞生,redis就是NoSQL中的一种热门数据库. 注:此类文章仅仅作为笔者的学习和阅读积累,若 ...