CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强。
1、多个背景图片
在css3里面,你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
2、新属性:Background Clip
此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下:
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示,而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示,而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值,类似与background-clip: border;
3、新属性: Background Origin
此属性需要与background-position配合使用。你可以用background-position计算定位是从border,padding或content boxes内容区域算起。(类似background-clip)
(1)background-origin:border;
从border边框位置算起
(2)background-origin:padding;
从padding位置算起
(3)background-origin:content;
从content-box内容区域位置算起;
background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。
4、新属性:Background Size
Background Size属性用来重设你的背景图片。有几个属性值:
(1)background-size: contain;
缩小背景图片使其适应标签元素(主要是像素方面的比率)
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小(主要是像素方面的比率)
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小,来缩放图片的尺寸大小
你可以去CSS 3 specifications站点看一下简单的案例说明。
5、新属性:Background Break
css3里标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示。
属性值:
(1)Background-break: continuous;
此属性是默认值,忽视区域之间的间隔空隙(给它们应用图片就好像把它们看成一个区域一样)
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。
6、背景颜色的调整
background-color属性在css3版本里面稍微做了增强,除了指定background color背景颜色之外,还可以对不使用的标签元素背景图片进行去色处理。
此例子里,这背景颜色可能是绿色,然而,如果底部背景图片无效的话,蓝色将代替绿色来显示。如果你没有指定某个颜色的话,它将其视为透明。
7、背景重复的调整
css2里当设置背景的时候,它经常被标签元素截取而显示不全,css3介绍了2个新属性来修复此问题。
space:图片以相同的间距平铺且填充整个标签元素
round:图片自动缩放直到适应且填充整个标签元素
CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。
8、Background Attachment 的调整
Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;),当background-attachment设置为scroll时,背景图片是不随内容滚条滚动的。现在,有了background-attachment:local,就可以做到让背景随元素内容滚动而滚动了。
转载:http://www.daqianduan.com/3302.html
CSS3详解:background的更多相关文章
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- CSS3详解:transform
CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- CSS3详解:transform、transition
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- 02_HTML5+CSS3详解第五、六天(实战篇之HTML5制作企业网站)
[废话连篇 - 实战篇,没什么好说的,最后一章兼容性问题懒得看了,over] Details 一.Xmind部分 xmind教程:http://www.jianshu.com/p/7c488d5e4b ...
- CSS3详解:border color
继续我们的 ,大家觉得怎么样呢?
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- CSS3 中border-image详解
CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
随机推荐
- 【leetcode】Convert Sorted List to Binary Search Tree (middle)
Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...
- 【leetcode】Search for a Range(middle)
Given a sorted array of integers, find the starting and ending position of a given target value. You ...
- 【matlab】libsvm-3.18安装与使用
安装 1. 在http://www.csie.ntu.edu.tw/~cjlin/ 中下载libsvm 2. 按照http://zjhello123.blog.163.com/blog/static/ ...
- java实现批量上传(swfupload)
下载 swfupload 文件夹 里面包含handlers.js,swfupload.js,swfupload.swf 三个文件. 我的是和ssh项目整合在一起的.因为struts2的拦截器会拦截所有 ...
- IIS配置默认文档
我们在配置IIS的默认文档时是在这里配置的,如下图: 但是,有可能我们的根目录下没有这个文件,而且我们网站运行的时候也不想访问根目录下的这个文件,而是要访问其他文件夹下的某一个文件,比如网站运行的时候 ...
- JAVA addShutdownHook测试
public static void main(String[] args) { System.out.println("1111111111"); try { Thread.sl ...
- MVC控制下输出图片、javascript与json格式
/// <summary> /// 输出图片 /// </summary> /// <returns></returns> public ActionR ...
- TIME_WAIT连接过多解决办法
问题起因: 自己开发了一个服务器和客户端,通过短连接的方式来进行通讯,由于过于频繁的创建连接,导致系统连接数量被占用,不能及时释放.看了一下18888,当时吓到了. 现象: 1.外部机器不能正常连接S ...
- EventBus学习入门
EventBus Features What makes greenrobot's EventBus unique, are its features: Simple yet powerful: Ev ...
- Android -- android:configChanges
原文:http://jingyan.baidu.com/article/2fb0ba4056b25700f2ec5faf.html 从Android 3.2(API 13),如果你想阻止程序在运行时重 ...