css3实现一个div设置多张背景图片及background-image属性
119092次浏览
以前做网页布局的时候，一个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(&haoroomsCSS1_s.jpg&) 0 0 no-repeat,
url(&haoroomsCSS2_s.jpg&) 200px 0 no-repeat,
url(&haorooms.jpg&) 400px 201px no-
也可以这么写：
background-image:url(&1.jpg&),url(&2.jpg&),url(&3.jpg&);
background-repeat: no-repeat, no-repeat, no-
background-position: 0 0, 200px 0, 400px 201
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/CSS1 background-image 属性
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
background-image： [ ,
&bg-image& = none |
默认值：none
无背景图。
使用绝对或相对地址指定背景图像。
使用线性渐变创建背景图像。（CSS3）
使用径向(放射性)渐变创建背景图像。（CSS3）
使用重复的线性渐变创建背景图像。（CSS3）
使用重复的径向(放射性)渐变创建背景图像。（CSS3）
设置或检索对象的背景图像。
如果设置了background-image，同时也建议作者设置用于当背景图像不可见时保持与文本一定的对比。
对应的脚本特性为backgroundImage。
浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质
11.50-11.51玩坏css3之linear-gradient揭秘《线性渐变》
没看《css揭秘》之前，我一般就会这样使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff);
我相信很多同事对gradient认知也是到这里，网上普遍也是这样介绍！
正常的情况下：liner-gradient(pink,#fff)在div盒子中是自上而下渐变,如下图：
没看《css揭秘》之前，我一般就会这样使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff);
我相信很多同事对gradient认知也是到这里，网上普遍也是这样介绍！
正常的情况下：liner-gradient(pink,#fff)在div盒子中是自上而下渐变,如下图：`.second{margin: 20width: 400height: 100background: linear-gradient(pink, #ffffff)}`
接下来就是神奇的地方了！在此我再着重推荐一下《css揭秘》[LEA VEROU著]，大家可以看看
先解读一下下面的第一行代码：
background: linear-gradient(-135deg, transparent 71px, #20B2AA 0) ；
background-size: 100% 100%;(这行代码也很重要，为下面的样式做铺垫,这个代码不清楚的赶紧去w3c看）
background-repeat: no-repeat
首先大家都能理解：
第一个参数：线性渐变方向,
第二个参数：切角深度，（等下看展示效果再解析）
第三个参数： 就是渐变颜色，如果（#20B2AA
0）后面不加0的话，默认情况下从#20B2AA渐变到#ffffff,所以用0代替，取消颜色渐变
如图所示：（一些其他样式的代码就没写上去了，主要理解上面的三行代码就行了）
那个箭头长度就是所谓的深度，也就是所谓的三角形斜角边的高！（这个大家默认大家都会的啊）
有时候我们需要这样的样式：
这就要牵扯到background-size以及 liner-gradient() top left(指定左上角)
`liner-gradient() top right`(指定右上角)
` liner-gradient() bottom left`(指定左下角)
`liner-gradient() bottom right`(制定右下角)
我们都知道，再怎么颜色渐变都是平铺过来的
那我们就可以指定 平铺的大小！即通过（backround-size）
第一个角：就是左上角 且 平铺的大小是1/4的div大小，那么大小水平和竖直方向就是各50%，
同理：其他三个角平铺的大小都是一样的。即
background-size(50% , 50%)
第一个角平铺：
background:liner-gradient(135deg, transparent 15px, pink 0) top left,(1)
第二个角平铺：
background:liner-gradient(-135deg, transparent 15px ,pink 0) top right
第三个角平铺：
background:liner-gradient(-45deg, transparent 15px ,pink 0) bottom right
第四个角平铺：
background:liner-gradient(45deg, transparent 15px ,pink 0) bottom left (4)
总和代码：
background: linear-gradient(135deg, transparent 15px, pink 0) top left,
linear-gradient(-135deg, transparent 15px, pink 0) top right,
linear-gradient(-45deg, transparent 15px, pink 0) bottom right,
linear-gradient(45deg, transparent 15px, pink 0)
background-size: 50% 50%;
background-repeat: no-
接下来自己尝试下面的图形：
box-sizing: border-margin: 10width: 120height: 40line-height: 40
text-align:padding-right: 20
background: linear-gradient(-135deg, transparent 14px, pink 0) top right,
linear-gradient(-45deg, transparent 14px, pink 0)
background-size: 100% 50%;
background-repeat: no-
转载或引用本网版权所有之内容须注明“转自（或引自）云栖社区”字样，并标明本网网址yq.aliyun.com
谢谢大家，获取更多精华技术IT资讯，请持续关注云栖社区“达摩老祖”and"码上有钱"
需要购买阿里云各种产品，
版权声明：本文内容由互联网用户自发贡献，版权归作者所有，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至： 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
用云栖社区APP，舒服~
【云栖快讯】新年大招！云栖社区为在读大学生/研究生准备了一份学（huan）习（zhuang）攻略，发布博文即有机会赢得iPad mini 4等大奖，学习换装两不误！欢迎报名参与~&&
一站式提供企业即时通讯、销售管理、协同办公。
基于深度学习技术及阿里巴巴多年的海量数据支撑， 提供多样化的内容识别服务，能有效帮助用户降低违规风险。其产品包括...
凝聚阿里巴巴多年来在无线业务安全防御的成功经验和技术成果，并面向开发者和企业提供安全扫描、应用加固、安全组件、数...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
2017阿里千余份技术干货大盘点
Loading...他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)CSS3中linear-gradient 线性渐变的使用方法-网有卖
利用CSS插入文字内容的方法
论PHP中cookies的创建、获取和删除
js的几种除法函数
ASP中如何利用Cookies实现用户自动登录效果
现在的位置:
CSS3中linear-gradient 线性渐变的使用方法
上一篇刚刚介绍过css的径向渐变，本文介绍CSS3中linear-gradient线性渐变的使用方法。
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
本篇只讲述标准的语法，要想兼容更多浏览器可以到网上搜索出很多解决方案，逻辑基本一致。
1.linear-gradient语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
2.示例：to left、top right、to bottom、to top
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */
div { background:linear-gradient(to top, red , blue) }
分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变，效果如下图：
3.示例：to right bottom、top right top、top left bottom、top left top
div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }
分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变，效果如下图：
注意：top right bottom和top bottom right是等同的
4.使用角度
div { background: linear-gradient(10deg, red, blue) }
效果如下图：
5.多个渐变点
5.1 多个渐变点默认均匀分布
div { background: linear-gradient(to right, red, blue, green) }
理论上渐变点数目不受限制，实际效果如下图：
5.2 多个渐变点不均匀分布
div { background: linear-gradient(red 5%, green 15%, blue 60%) }
6.重复性渐变
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
10%的位置为yellow，20%的位置为green，然后按照这20%向下重复，效果如下图：
7.使用rgba
div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }
从红色的不透明，到全透明的渐变，效果图如下：
声明:如需转载，请注明来源于并保留原文链接：http://www.webym.net/jiaocheng/699.html
您可能还会对这些文章感兴趣！
给力的网站制作教程分享
网站制作经验和知识分享
关于网站排名优化教程！
网页素材资源神秘宝藏
网站JS特效代码大全
网站最新模板免费下载
网站模板下载汇总
网页设计教程排行榜
网站制作必备软件
DreamWeaver下载
国产网页制作软件中的神器
Visual Studio软件下载
Visual Studio免费下载
Photoshop软件下载
Photoshop免费下载
Flash软件下载
Flash软件免费下载
Frontpage软件
Frontpage软件下载
Fireworks软件下载
Fireworks软件免费下载
Adobe Illustrator软件
最好用的AI软件
最新下载资源