css3实现一个div设置多张背景图片及background-image属性实例演示
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
引子
以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。
题外话
关于css3的background，功能很强大，有很多属性，像background-size等等，这些属性都可以写一篇博客来讲述。关于css3background的其他属性，后面会出博客来单独讲述！
CSS3/CSS1 background-image 属性
语法:
background-image：<bg-image> [ , <bg-image> ]* <bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> 默认值：none
取值：
none：无背景图。 < url >：使用绝对或相对地址指定背景图像。 < linear-gradient>：使用线性渐变创建背景图像。（CSS3） < radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3） < repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3） < repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）
说明：
设置或检索对象的背景图像。
如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。
对应的脚本特性为backgroundImage。
兼容性：
IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。
IE9不支持CSS3新增参数值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作为背景图像。
Opera11.50-11.51不支持CSS3新增参数值：< radial-gradient > |< repeating-radial-gradient >作为背景图像。
写法：
css3设置多张背景图片
css3设置多张背景图片，可以如下写：
background:url(?css/"haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;
也可以这么写：
background-image:url(?css/"1.jpg"),url(?css/"2.jpg"),url(?css/"3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
css3背景渐变
标准写法
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
上面这种CSS语法我们经常见到，可能有人看不懂具体的意思，其实上面的些符号含义与正则表达式有很多一致之处：
[]在正则中表示一个字符类，这里，你可以理解为一个小单元。
|表示候选。也就是“或者”的意思，要么前面的，要么就后面的。
?为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。例如：
background:linear-gradient(red, yellow);
就是从上往下的红黄条纹效果。
+也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。
<>中的是关键字，主要是让开发人员知道这里应该放些什么内容。
水平渐变
{background-image:linear-gradient(left, red 100px, yellow 200px);}
效果如下图：
左上角渐变
那从(100px, 100px)到(200px, 200px)应该就是从左上角开始，写法如下：
{background-image:linear-gradient(left top, red 100px, yellow 200px);}
效果如下
渐变方向写法组合：
left, right, top, bottom, left top, left bottom, right top, right， bottom
分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从……（都懂的，不全写了）
当然，也可以用angle角度来写！
{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}
具体的样式大家可以尝试着写一下，看一下！很多情况下，用了才知道！
注意：有不少效果加了-webkit前缀以及-moz前缀会展现的不一样！
例如：
background-image:-webkit-linear-gradient(-45deg, red, yellow)
与
background-image:linear-gradient(-45deg, red, yellow)在Chrome浏览器下的渐变方向居然是相反的！但是45deg是正常的。Firefox浏览器下也是如此，有前缀和没有前缀方向相反！咋回事？
原因很简单，CSS3目前还是草案阶段！
从浏览器去掉前缀前后的变化可以推测，之前，W3C的渐变坐标是与photoshop中一致的，但是，后来，由于某些原因，修改了。
至于什么原因，根据我草草的查找，可能与下面几个关键字之一有联系：animation/transition动画、write-mode书写方向、flex box模型、以及radial-gradient渐变等。在这里就不深入研究了！
前缀兼容
基本的写法如下：
background-image: linear-gradient(top, #fff, #dededc);
但是为了兼容，有时候要写多个前缀，变成如下：
background-image: -ms-linear-gradient(top, #fff, #dededc);
background-image: -moz-linear-gradient(top, #fff, #dededc);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc));
background-image: -webkit-linear-gradient(top, #fff, #dededc);
background-image: -o-linear-gradient(top, #fff, #dededc);
background-image: linear-gradient(top, #fff, #dededc);
关于”css3实现一个div设置多张背景图片及background-image属性“今天就写到这里，有问题可以相互交流，加油！
相关文章
- 这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2021-04-13
这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-29- 这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2021-03-09
前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法，感兴趣的朋友跟随小编一起看看吧2019-11-05CSS的background属性及CSS3的背景图片设置总结
这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下2016-06-13- 这篇文章主要介绍了CSS3对背景图片的裁剪及尺寸和位置的设定方法,在IE浏览器中要注意一下兼容性,需要的朋友可以参考下2016-03-07
- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- 使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-19
css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08- 背景图片/纹理有很多种使用方式，常常用于为添加网站的最佳的界面美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果,需要的朋友可以了解2012-12-19
最新评论