css3 背景记
css3 背景
css背景主要包括五个属性：
background-color
background-color:transparent || <color>
用来设置元素的背景颜色，默认值为transparent(透明)，可用颜色名，RGB色，hls值，十六进制值指定颜色。
background-image
background-image:none || <url>
用来设置元素的背景图片，默认值为none，可以用相对地址，也可以用绝对地址。
background-repeat
background-repeat:repeat || repeat-x || repeat-y || no-repeat
用来设置元素背景图片在元素盒模型中的铺放方式，默认值为repeat，往X轴与Y轴方向同时平铺，repeat-x只x轴方向平铺，repeat-y只y轴反向平铺，no-repeat不平铺。
background-attachment
background-attachment:scroll || fixed
用来设置元素背景图片是否固定。默认值为scroll，不固定。fixed，固定。
background-position##
background-position:<percentage> || <length> || [left | center | right] [,top | center | bottom]
用来设置元素背景图片的位置，默认值为(0,0) || (0%,0%) || (left top),其值可以是具体的百分数或数值，也可以使用关键词。
在css3中，又新增了4个属性。
background-origin
background-origin属性主要用来决定background-position属性的参考原点，即决定背景图片定位的起点。
background-origin:padding-box || border-box || content-box
在浏览器的老版本中，属性值分别为padding，border，content。
padding-box(padding):默认值，决定background-position起始位置从padding的外边缘开始显示背景图片。
border-box(border):决定background-position起始位置从border的外边缘开始显示背景图片。
content-box(content):决定background-position其实位置从content的外边缘开始显示背景图片。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 100px;
height: 100px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-origin:padding-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
默认情况，图片以盒子padding的左上角为起点，直到border外边缘的右下角。
div{
width: 100px;
height: 100px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-origin:border-box;
}
当值为border-box时，图片以盒子的border左上角为起点，直到border右下角。
div{
width: 100px;
height: 100px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-origin:content-box;
}
当值为content-box时，图片以盒子的content左上角为起点，直至border右下角。
注意：当backgroun-attachment为fixed时，background-origin将无效。
background-clip
主要用来定义背景图片的剪切区域,属性值与background-origin类似。
background-clip:border-box || padding-box || content-box
老版本属性值为border，padding。
border-box:默认值，元素背景图像从元素的border区域向外剪切。
padding-box:元素背景图像从padding区域向外剪切。
content-box:元素背景图像从content区域向外剪切。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 100px;
height: 100px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-origin:border-box;
background-clip:border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-box是默认值，自动剪切border之外的图像。
div{
width: 100px;
height: 100px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-origin:border-box;
background-clip:padding-box;
}
当值为padding-box时，padding之外的区域被剪掉。
div{
width: 100px;
height: 100px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-origin:border-box;
background-clip:content-box;
}
当值为content-box时，content之外的区域被剪掉。
background-size
主要用来指定背景图片的尺寸。
background-size:auto || <length> || <perentage> || cover || contain
auto:默认值，将保持背景图片的原始高度和宽度。
<length>:取具体的整数值，将改变背景图片大小。
<percentage>:取值为百分值，根据元素的宽度改变背景图片大小。
cover:将背景图片放大，以适合铺满整个容器。但会导致背景图片失真。
contain:保持背景图片本身的宽高比例，将背景图片缩放到宽度或高度正适应所定义背景的区域。
取值时可以设置两个，也可以设置一个。取一个值时，指定了背景图片的宽度，第二个值相当于auto，也就是高度。这种情况，能够让背景图片的高度自动按照比例缩放。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 300px;
height: 200px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-size:auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
auto是默认值，保持背景图片大小比例。
div{
width: 300px;
height: 200px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-size:250px 200px;
}
指定宽高，改变背景图片大小。
div{
width: 300px;
height: 200px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-size:50% 50%;
}
指定百分比时，将根据盒子宽高取值。上例中盒子宽高为300px X 200px，设置背景图片宽高为50%，那么背景图片就等于150px X 100px。
div{
width: 300px;
height: 200px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-size:cover;
}
取值为cover时，背景图片放大填充整个盒子。
div{
width: 300px;
height: 200px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
background-size:contain;
}
取值为contain时，背景图片成比例放大，直至宽或高抵住盒子。
多背景属性
在css3之前，每个容器只能指定一张背景图片，因此每当需要增加一张背景图片时，必须增加一个容器来容纳它。早期使用嵌套div容器显示特定背景的做法不是很复杂，但是它明显难以管理。它让html标记更加复杂，同时也会增加页面文件大小。如果要增加某个图片效果，不仅需要修改css还需要修改html代码。
通过css3的多背景属性，html标记就不需要任何修改，在css的background-image或则background属性中列出需要使用的所有背景图片，用逗号隔开。而且每张图片都具有background中的属性，例如可以重复，改变大小等。
background:[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] ,*
也可以把缩写拆为以下形式。
background-image:url1,url2,...,urlN;
background-repeat:repeat1,repeat2,...,repeatN;
background-position:position1,position2,...,positionN;
background-size:size1,size2,...,sizeN;
background-attachment:attachment1,attachment2,...,attachmentN;
background-clip:clip1,clip2,...,clipN;
background-origin:origin1,origin2,...,originN;
background-color:color;
除了backgroun-color之外，其他的属性都可以设置多个属性值，不过前提是元素有多个背景图片存在。多个属性值之间必须使用逗号隔开。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 300px;
height: 200px;
border:10px dashed;
padding:10px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left top / 50% 50%,
url(https://img.alicdn.com/imgextra/i4/2406102577/TB2HT.RdFXXXXclXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right top / 50% 50%,
url(https://img.alicdn.com/imgextra/i4/2406102577/TB2TxlhdVXXXXXxXXXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right bottom / 50% 50%,
url(https://img.alicdn.com/imgextra/i3/2406102577/TB2orQSdFXXXXb_XpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left bottom / 50% 50%;
background-color:#ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-color属性只能有一个，切记，切记。
css3背景完。
css3 背景记的更多相关文章
- CSS3背景温故
1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...
- CSS自学笔记（11）:CSS3背景和边框
CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...
- 第七十九，CSS3背景渐变效果
CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一．线性渐变 linear-gradi ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
- [转]真正了解CSS3背景下的@font face规则
本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
- CSS3背景 制作导航菜单综合练习题
CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
随机推荐
- codeforce 621A（水题）
A. Wet Shark and Odd and Even time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- UVA 11354 Bond（MST + LCA）
n<=50000, m<=100000的无向图,对于Q<=50000个询问,每次求q->p的瓶颈路. 其实求瓶颈路数组maxcost[u][v]有用邻接矩阵prim的方法.但是 ...
- POJ 1064 Cable master (二分答案)
题目链接:http://poj.org/problem?id=1064 有n条绳子,长度分别是Li.问你要是从中切出m条长度相同的绳子,问你这m条绳子每条最长是多少. 二分答案,尤其注意精度问题.我觉 ...
- HDU 4431 Mahjong (DFS，暴力枚举，剪枝)
题意:给定 13 张麻将牌,问你是不是“听”牌,如果是输出“听”哪张. 析:这个题,很明显的暴力,就是在原来的基础上再放上一张牌,看看是不是能胡,想法很简单,也比较好实现,结果就是TLE,一直TLE, ...
- Bootstrap迁移系列 - Navbar
在V2.3.2版本中一个标准的导航栏模版如下: <div class="navbar"> <div class="navbar-inner"& ...
- Javascript高级篇-Function对象
1.引入 1.1Function是基于原型的对象 2.创建Function对象 2.1 var myFun = new Function("参数一","参数二" ...
- 基于linux 的2048
在 debian 下写了一个 2048, 效果如下: 感兴趣的朋友可以在这里(http://download.csdn.net/download/kamsau/7330933)下载. 版权声明:本文为 ...
- 【转】c++笔试题
原文:http://blog.csdn.net/dongfengsun/article/details/1541926 ①链表反转 单向链表的反转是一个经常被问到的一个面试题,也是一个非常基础的问题. ...
- Codeforces Gym 100650C The Game of Efil DFS
The Game of EfilTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/v ...
- C# 强制关闭当前程序进程（完全Kill掉不留痕迹）
C# 强制关闭当前程序进程(完全Kill掉不留痕迹) /// <summary> /// 运行DOS命令 /// DOS关闭进程命令(ntsd -c q -p PID )PID为进程的ID ...