css3实现一个div设置多张背景图片及background-image属性实例演示


Posted in HTML / CSS onAugust 10, 2017

引子

以前做网页布局的时候,一个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

兼容性:

css3实现一个div设置多张背景图片及background-image属性实例演示

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-repeat;
也可以这么写:

background-image:url("1.jpg"),url("2.jpg"),url("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);}

效果如下图:

css3实现一个div设置多张背景图片及background-image属性实例演示

左上角渐变

那从(100px, 100px)到(200px, 200px)应该就是从左上角开始,写法如下:

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果如下

css3实现一个div设置多张背景图片及background-image属性实例演示

渐变方向写法组合:

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属性“今天就写到这里,有问题可以相互交流,加油!

HTML / CSS 相关文章推荐
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 #HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 #HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 #HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 #HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 #HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 #HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 #HTML / CSS
You might like
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
关于python中的xpath解析定位
2020/03/06 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
比利时买床:Beter Bed
2017/12/06 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书