提升你设计水平的CSS3新技术[译]（5）
作者：暴风彬彬 来源：彬go 发布时间：2009-08-02 20:51:00
4. 多背景图
CSS3 允许你使用多个属性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一个元素上添加多层背景图片.
在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是image, position 和repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
第一个图片将是离用户“最近”的那个。
该属性的一个更复杂的版本可以是这样的：
div {
background: url(example.jpg) top left (100％ 2em) no-repeat,
url(example2.jpg) bottom left (100％ 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在这里，(100％ 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100％宽度和2em的高度。
因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。
浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效
扩展阅读：
0
投稿猜你喜欢
在windows平台上使用pyhton编写语音识别程序需要用到speech模块，speech模块支持的主要功能有：文本合成语音，将键盘输入的- 一、PyTorch 检查模型梯度是否可导当我们构建复杂网络模型或在模型中加入复杂操作时，可能会需要验证该模型或操作是否可导，即模型是否能够优
- 本文实例为大家分享了python实现抠图给证件照换背景的具体代码，供大家参考，具体内容如下import cv2import numpy as
- 1.文章背景近期，笔者所在公司的某业务系统的存储临近极限，服务器马上就要跑不动了，由于该业务系统A包含多个子系统A1、A2、A3 ... A
- 在框架选择上，不少人会觉得swoft才是最强PHP框架，尤其是在常驻内存模式的应用级高性能框架，性能是这一堆页面级框架遥不可及的，但是使用上
- Django中间件在http请求 到达视图函数之前 和视图函数return之后，django会根据自己的规则在合适的时机执行中间件中相应的方
- 本文实例讲述了PHP封装CURL扩展类。分享给大家供大家参考。具体如下：<?php/*** @description: 封装CURL扩
- 前言最近写了个CNode 社区的微信小程序版本，把在微信小程序中使用npm包，踩的坑记录一下，希望能给遇到类似问题的小伙伴，提供一些思路和方
- explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句.使用方法:在sel
- 相关文章推荐：各种loading加载图标下载 gif格式loadinfo和ajaxload一样，也是一个在线Ajax载入动画生成工
- 最简单的模式，C/S模式实现聊天室从半双工开始，何谓半双工？半双工即是说双方可以互发消息，但一次只能一个用户发送。 只要稍微会点s
- 本文实例讲述了Python装饰器用法。分享给大家供大家参考，具体如下：无参数的装饰器#coding=utf-8def log(func):
- 很久没有上过天极网，今天偶然兴起跑上去看了一下，看到消息说天极网深圳站隆重上线，于是也顺便去溜了一把，打开页面的时候差点有种不知所措的感觉，
- console 打印乱码1.File Encoding设置项目编码为GBK2.文件模板设定python脚本为# -*- coding: ut
- 发现问题pandas版本0.25.3import pandas as pdsymbol_info_columns = ['1'
- 1、安装pymysql库如果你想要使用python操作MySQL数据库，就必须先要安装pymysql库，这个库的安装很简单，直接使用pip
- 本文实例讲述了Python定时任务sched模块用法。分享给大家供大家参考，具体如下：通过sched模块可以实现通过自定义时间，自定义函数，
- 计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音
- 英文文档：vars([object])Return the __dict__ attribute for a module, class,
- 前言本文主要给大家介绍的是关于Python中表达式x += y和x = x+y 区别的相关内容，分享出来供大家参考学习，下面来看看详细的介绍
