CSS3允许给box/div元素设置多个背景图片,只需要在原来的基础上加逗号分隔即可分别设置。
支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。
先上一个小例子,一只羊的png图片背景和草原的大背景 可以分别设置。效果如下:
|
#example1{
width:500px;
height:250px;
background-image:url(sheep.png),url(betweengrassandsky.png);
background-position:centerbottom,lefttop;
background-repeat:no-repeat;
}
|
它是如何工作的呢?
多个背景图片可以通过单个的设置,以逗号分隔后,会分别识别单个的背景图片属性来加以设置,逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念,优先级取决于你添加背景图片的顺序。
语法:
|
background-image: <bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
<strong>Note: a value of ‘none’ still generates a layer.</strong>
|
实例介绍:
|
background-image:url(sheep.png),url(betweengrassandsky.png);
|
CSS3 中加以此逗号同样支持以下属性:
background-repeat
- background-attachment
background-position
,
background-clip
,
background-origin
background-size
.
源码例子:
|
background-position:centerbottom,lefttop;
|
逗号分隔的属性,会从头到脚 一 一地 匹配,假设参数过少,则会使用最后末尾的属性来填充。
假设参数过多,则会自动舍弃,不予理会。
background的速记短语法 同样支持!
|
background: [ <bg-layer> , ]* <final-bg-layer>
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} || <background-color>
<span style="color: #993300;"><strong>Note: background-color is only permitted in the final background layer.</strong></span>
|
实例介绍:
|
background:url(sheep.png)centerbottomno-repeat,url(betweengrassandsky.png)lefttopno-repeat;
|
浏览器兼容性:
支持 目前主流浏览器 及支持css3标准的所有浏览器。
例如: Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。
更多实例介绍:
Example A
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#exampleA{
width:500px;
height:250px;
background-image:url(decoration.png),url(ribbon.png),url(old_paper.jpg);
background-repeat:no-repeat;
background-position:lefttop,rightbottom,lefttop;
}
<strong>or:</strong>
#exampleA{
width:500px;
height:250px;
background:url(decoration.png)lefttopno-repeat,url(ribbon.png)rightbottomno-repeat,url(old_paper.jpg)lefttopno-repeat;
}
|
Example B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#exampleB{
display:inline-block;
margin:1em;padding:1em;
background-image:url(left.png),url(right.png),url(main.png);
background-repeat:no-repeat,no-repeat,repeat-x;
background-position:lefttop,righttop,lefttop;
}
or:
#exampleB{
width:500px;
height:250px;
background:url(left.png)lefttopno-repeat,url(right.png)righttopno-repeat,url(main.png)lefttoprepeat-x;
}
|
更多内容 请参考我的个人博客 http://ismartstudio.com/
分享到:
相关推荐
切图附件
主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
在css中,可以利用“background-size”属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加“background-size:cover;”样式,即可使背景图片的大小自适应。
在CSS3中,通过background-im、age等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。 background: background-color background-image background-position background-repeat background-...
主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下
大家都知道,目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果。那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、...
css代码添加背景图片常用代码
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
CSS3的background-size属性,实现响应式式图片等比例缩放。告别了考虑各种兼容性物理像素的烦恼。
一款精美的css3半透明遮罩背景lightbox图片展示特效,这个lightbox效果共有三种展示图片的效果:渐隐效果,淡入淡出效果和全屏放大在缩小效果。
在做下拉框select的时候用一个箭头符号,作为下拉框的三角,在firefox和chrome下均可以正常显示,但是在IE下无法显示。 查找了很久,发现是图片格式问题,把png格式的转换成gif的就没有问题了。。。。 附相关代码,...
CSS3 做出iPhoneX手机屏幕背景和页面背景图片同时切换特效
jQuery和CSS3简单的背景图片3D视觉差特效
css3比css多了一些样式设置而已。 css3是向前兼容的,也就是说,css中有效的code在css3也有效。 一个css与css3都有效的code,如果浏览器不支持css3,那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中...
CSS3给图片添加旋转背景特效 || 鼠标悬停旋转背景特效
CSS中背景图片定位方法:background-position的用法,附带算法
今天的这款效果,鼠标悬停背景图片翻转,无需js,只要一部分的css3代码即可,其他的都是普通的css2代码 使用方法: 1、将head中的lanrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的...
前端开源库-css-background-videoCSS背景视频,一个支持背景视频作为CSS属性的HTML5填充程序
colorful-background-css-generator, 彩色css渐变 background 生成器 彩色css渐变 background-生成器用于创建彩色css背景的纯javascript生成器。检查这里网站查看生成器中的操作并使用颜色设置进行播放。它的思想是...