background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3

中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结。

一、最基本的情况是指定一张图片的url作为背景:

<style>
.parent{
height:200px;
width:500px;
border: 10px solid rgb(125, 125, 123);
background-color: #bff;
background-image:url(halfRombes.png);
}
</style>

效果如下(浏览器默认背景图片重复平铺):

二:将渐变指定为背景:

      background-image: linear-gradient(to left top, red, blue);

效果如下(由右下角到左上角,由红色渐变到蓝色):

除了线性渐变,还有径向渐变,径向渐变也就是由中心向外辐射的渐变。现代浏览器(包括ie10+)支持。

具体的语法这里不讨论,因为篇幅实在太长,请移步获取更详细的信息:

MDN#linear-gradient

MDN#radial-gradient。

三、使用base64编码的图片:

以本文第一个例子的图为例:

该图的base64编码为:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII="

将图片url指向该图片编码,那么会得到和第一个例子一样的效果。

现代浏览器支持情况优秀,ie8+支持,对base64编码具体支持情况移步:浏览器对base64编码的支持情况

可以看见,base64编码以data:开头,指明是什么类型的图片,如data:image/png;表示这串编码是png图片,接着是'base64;表示是base64编码格式,最后跟着的就是图片的编码信息了。

那么base64是什么呢?

Base64是一种基于64个可打印字符来表示二进制数据的编码方式,可用于在http环境下传递较长的标识信息。Base64常用于表示、传输、存储一些二进制数据, 图片也是二进制数据。(在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不 同)

base64编码的图片好处就在于:当要单独使用很小的图片(比如用于平铺的背景图),就可以将图片改为base64形式来减少http请求。

我们可以通过HTML5的新特性自己来获取图片的base64编码而不借助其他工具:

1、一个方法是基于HTML5的FileReader对象的readAsDataURL()方法,下面就是一个读取input上传的图片然后展示出来的例子,this.result就是图片的base64编码信息。

document.getElementById("file").onchange=function(){
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e){
document.body.innerHTML = '<img src="'+this.result+'" alt="">'
}
}

2、还有一个方法是使用HTM5的canvas中图片处理的toDataURL()方法,我之前的一篇文章就是讲如何使用canvas处理图像数据的方法:

canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

可以简单的修改下文章中的代码,只要将图片画到画布上,不要修改图片数据,然后通过toDataURL()返回图片的base64编码即可。

3、还有个更懒的方法就是借助firefox、chrome浏览器自带的开发工具(通过F12召唤)查看图片的base64编码。

具体方法如下,灰常简单:

firefox:首先定位到要查看编码的图片,在inspector里面右键该图片,选择下图红框中的copy image data url,就能copy该图片的base64编码,粘贴使用即可。

chrome:同样要定位到要查看编码的图片,在elements里面右键该图片,选择下图红框中的open link in resources panel,切换到resources板块,右键该图片,选择copy image as data url就能copy该图片的base64编码,粘贴使用即可。

图(1):

图(2):

是不是超级简单!

四、终于讲到多图片背景了:

在CSS3稳定版草案中对多图片背景制定了规范: background-image属性可以通过","来分隔多个图像url设置多个背景图像。

每一个图像背景就创建了一个背景层(background layer),有几个背景图片就定义了几个层。background-image图片列表中第一个图像离用户最近,最后的图像离用户最远,background-color在离用户最远的背景图像下面,border-color和border-image在第一个背景图像上面,类似ps中的图层的概念。

如果一个图像(比如URI无效)不能成功加载出来,浏览器会将对应background-image的值认定为none(对应的图层还是存在的),表示图片丢失,但不影响其他背景图片的渲染和呈现。由于网络会存在不稳定导致背景图像加载不出来,所以始终应该提供background-color。

当然最关心的还是浏览器的支持情况,让人放心的是chrome,firefox,ie9+,移动终端浏览器都支持多背景图片。

好了好了,废话有点多,还是例子更直观:

接下来我会用到4张图(halfRombes.png, MicrobiaMat.png, Stairs.png, Stars.png),按顺序添加到background-image中:

            

代码如下:

.parent{
height:200px;
width:500px;
border: 10px solid rgb(125, 125, 123);
background-color: #bff;
background-image:url(halfRombes.png), url(MicrobiaMat.png), url(Stairs.png), url(Stars.png);
background-position: left top, right bottom, right top;
background-repeat: no-repeat, repeat-x;
}

是的,background-position,background-origin,background-repeat等属性的值也要相应地进行设置,也是用","分隔开,一一对应声明的多张图片。如果某个属性设置了过多的值,则舍弃排在后面的多余的值;如果某个属性没有提供足够的值,就重复应用 该属性的值列表。效果如下:

咱们来逐条分析:

由于排在背景图片列表前面的图片会在上层,而后面的图片在下层,所以看到三角形的图在最上面,五角星的图在最下面。

position只给了3个值,所以后面的图会重复position列表的值,所以实际上是:left top, right bottom, right top, left top;

repeat只给了2个值,所以会重复该属性列表,实际上是:no-repeat, repeat, no-repeat, repeat;

其他背景属性值的应用规则同样如此。

有意思的是,background:inherit;(ie7-不支持)可以让元素继承父元素的背景属性,就连多图片背景也不例外哦(现代浏览器支持多图背景的继承,移动端更是妥妥的支持),下面是一个嵌套了div的例子,在上面例子中.parent容器嵌套一个.child容器,并对子容器应用如下样式:

    .child{
margin-top: 220px; /*为了让子容器显示在父容器下面,比较好比较*/
height: 200px;
background:inherit; /*继承父元素的背景*/
}

结果是这样的:

当然,base64编码的图片也可以用于多图片背景,渐变也可以,甚至可以混用在一起!

pc端和移动端浏览器也能提供很不错的支持。

将上面的例子混在一起是这样的:

.parent{
height:200px;
width:500px;
border: 10px solid rgb(125, 125, 123);
background-color: #bff;
background-image:url(halfRombes.png), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII=), url(Stairs.png), linear-gradient(to left top, red, blue);
background-position: left top, right bottom, right top;
background-repeat: no-repeat, repeat-x;
}

效果如下:

我承认这个图是很丑,但只是为了说明用法。这里有个使用多个渐变设置背景图案的一个网站,奥妙之处大家自己玩味,上面的图也是从这个网站借用来的:css3patterns

五:设置多图片背景混合模式:

当在一个容器同时指定了多个背景图片后,默认情况下,图片是按声明的图片顺序来一层层叠加显示,类似于ps中的图层的概念。默认情况下,如果上层的图片背景透明,那么可以看到下层的图片,如上层的图片不透明,那么就看不到下层的图片了。但是有个属性正好能用来定义多图背景的图片重叠显示方式,这个属性是:

background-blend-mode:[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn |   hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity ]

(对于各可能值的描述,这里有更详细的正式说明:MDN#blend-mode

通过指定背景混合模式,能够让背景图片和背景颜色的重叠部分的颜色以一定的方式混合。

可以指定一种混合模式应用到所有背景图片,也可以逐个指定不同的混合模式,根据background-image声明的图片顺序依次设置。

ie浏览器和uc浏览器是不支持的,safari部分支持(不支持hue,saturation,luminosity,color):浏览器对background-blend-mode支持情况

当我对.parent容器应用:background-blend-mode:luminosity;

效果是这样的(safari不支持luminosity值):

哈哈,由此可以知道background-blend-mode不能通过设置background:inherit被继承

需要注意的是background-blend-mode还没纳入css候选推荐,但是浏览器支持情况已经很给力了。

不得不感慨,CSS真的是越来越强大了。

在文末,觉得还是有必要解开一个疑惑:

为什么url里面的值有人用引号包起来,有人不用引号包起来呢?

其实w3c对uri值的编码 :http://www.w3.org/TR/2011/PR-CSS2-20110412/syndata.html#uri

规范原文是这么说的:

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

翻译成中文就是:url()可以用可选的空格包住可选的单引号或双引号,接着包住uri本身。当url()没有用引号包住uri时,如果uri中包含括号、空格、单引号、或者双引号,必须通过'\'进行转码,例如,如果uri包含'()',那么要转码成这样:'\(', '\)'

也就是url(a.png) 等价于url( a.png ),等价于url('a.png),等价于url("a.png"),等价于url( "a.png" )。

所以不加引号是符合规范的,并且可以减少css文件大小,虽然作用微乎其微。浏览器们对此的实现是符合规范,(ie9下的ie7模式有点怪胎,不管他)

有观点认为不加引号会有安全问题,这个主要是由于xss攻击,但是既然css文件是开发者自己编写的,也就是不会在url中插入不可信数据,那么当然可以放心的省略引号。

本文到此就要结束啦,主要讲了background-image属性,下次将会对其他背景属性进行完整的总结。

-------------------------------转载注明出处^_^: http://www.cnblogs.com/suspiderweb/

background复合属性详解(上):background-image的更多相关文章

  1. CSS2.1SPEC:视觉格式化模型之width属性详解(上)

    在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用.在盒模型中,width和height包围了一个框的内容区域(content ...

  2. CSS2.1SPEC:视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

  3. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  4. css 11-CSS3属性详解(一)

    11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...

  5. WPF依赖属性详解

    WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency P ...

  6. Android组件---四大布局的属性详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...

  7. EditText属性详解

    关于EditText属性详解很详细的记录,转过来收着 1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password=" ...

  8. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  9. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

随机推荐

  1. PowerShell 中进行列表展示的排序-倒序

    Order Your Output by Easily Sorting Objects in PowerShell ★★★★★ ★★★★ ★★★ ★★ ★ January 10, 2012 by Th ...

  2. 《转》精巧好用的DelayQueue

    该文章转自:http://www.cnblogs.com/jobs/archive/2007/04/27/730255.html 我们谈一下实际的场景吧.我们在开发中,有如下场景 a) 关闭空闲连接. ...

  3. py执行系统命令

    1. os.system In [32]: run = os.system("date") Thu Jan 28 09:41:25 CST 2016 In [33]: run Ou ...

  4. NoSQL注入的分析和缓解

    本文要点介绍: 1.了解针对NoSQL的新的安全漏洞 2.五类NoSQL攻击手段,比如重言式.联合查询.JavaScript 注入.背负式查询(Piggybacked queries),以及跨域违规 ...

  5. SQLServer 理解copyonly备份操作

    标签:MSSQL/日志截断 概述 Alwayson在添加数据库的过程中如果同步首选项选择的是“完整”,那么就会在主副本上执行copyonly的完整备份和日志备份在辅助副本上执行还原操作,也正是这个操作 ...

  6. Spark:如何替换sc.parallelize(List(item1,item2)).collect().foreach(row=&gt;{})为并行?

    代码场景: 1)设定的几种数据场景,遍历所有场景:依次统计满足每种场景条件下的数据,并把统计结果存入hive: 2)已有代码如下: case class IndoorOTTCalibrateBuild ...

  7. 4.3、Android Studio突破64K方法限制

    当应用代码和库代码代码超过64K限制时,早期版本的构建系统会出现如下提示: Conversion to Dalvik format failed: Unable to execute dex: met ...

  8. MS17-010 漏洞研究——免考课题 20155104 赵文昊

    免考实验与研究--MS17-010漏洞研究 研究内容 ·MS17-010漏洞的来源 ·MS17-010漏洞的攻击实例 ·MS17-010漏洞原理分析 ·MS17-010代码分析 写在前面:这次对一个漏 ...

  9. Bootstrap字体无法显示

    下载的font文件没有放进你的项目文件里.

  10. __LINE__的用法

    简单的说,__LINE__可以获取当前代码的函数,结合__FUNCTION__可以打印调试信息,比如函数出错时运行的函数名,及行号,例如 #define p_err_fun , os_time_get ...