使用css2.1实现多重背景、多重边框效果[译]（2）
作者：小志 来源：小志博客 发布时间：2010-08-23 16:32:00
示例代码：多背景图片
使用这种技术我们可以重现类似于Silverback网站中只使用一个HTML元素的多背景图片效果。
该元素拥有自己的背景图片和需要填充的空间。将该元素相对定位后作为其伪元素的绝对定位参考点。使用正值的z-index将有助于伪元素选择合适的z-index值（小志注：对于这句的翻译思考了很久一直没能选择合适的词来表达，主要的意思根据下面的代码我们可以看到是将伪元素的z-index值设置比元素自身的小即可，最好是用负值）。
#silverback {
position:relative;
z-index:1;
min-width:200px;
min-height:200px;
padding:120px 200px 50px;
background:#d3ff99 url(vines-back.png) -10％ 0 repeat-x;
}
两个伪元素将会通过绝对定位的方式固定在该元素的两边。设置z-index值为-1将伪元素移到内容层的后面。这样伪元素将会位于元素的背景和边框上面，但是该元素的内容依然可以选择。
#silverback:before,
#silverback:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
每个伪元素都拥有一个可重复的背景图片属性。这是实现类型多重背景效果所需要的。
伪元素的content属性允许添加图片内容。这样我们就可以添加两张图片在一个伪元素中。可以通过改变伪元素的其他属性改变图片的位置，例如text-align和padding。
#silverback:before {
content:url(gorilla-1.png);
padding-left:3％;
text-align:left;
background:transparent url(vines-mid.png) 300％ 0 repeat-x;
}
#silverback:after {
content:url(gorilla-2.png);
padding-right:3％;
text-align:right;
background:transparent url(vines-front.png) 70％ 0 repeat-x;
}
使用CSS2.1的多重背景图效果成品。
0
投稿猜你喜欢
- 在用户体验量化方法研究（一）中，我们以用户体验层次模型为基础，提出了三种量化用户体验的方法：以任务为中心、以行为为中心以及以体验为中心的量化
- 可能接触网站与编程设计的人都知道，一个属性值需要引号包括起来，但是有的时候就是因为没有正确设定引号类型，导致程序出错，就连我自己也是这样，我
网上找了很多。貌似没什么好的解决办法。自己参考了下。把它直接整成一条SQL语句了。不过字段的格式只允许前面或者后面有字符。中间不允许出现字符- 不知道算不算DW4的大BUG. DW4实际的运行如下： 读注册表中HKEY_CURRENT_USER/
- 请问如何处理Oracle中较大的文本数据？我们可在ASP中予以解决，如在Oracle8i中文版中，建立数据表：CREATE TABLE SY
- 建立资料表：Step1首先开启phpmyadmin，进入wordpress资料库中，并新增一个wp_gbook的资料表与栏位数目8。Step
- asp函数实现把数字格式化为每3个数字时以逗号间隔的数字见下：<％Function Comma(str)If No
- 作为微软推出的网页与数据库解决方案，ASP由于有微软得天独厚的操作系统等技术后盾支持，因此得到了迅速的发展，并且正受到越来越多的欢迎，在目前
- 最近对微格式进行了一些学习，在学习过程中收获不少。在此分享下，欢迎交流！微型格式的优点：1，语义化的HTML和CSS类名称来标记共同内容。2
- 前一段时间，一个流行的东方系列mv 《bad apple》 带来一股奇怪的风潮： 各种技术狂人纷纷把这段mv在一些匪夷
- 我想没多少人敢保证写JavaScript能不用调试，那选择用什么方式调试会比较好呢？告别了我最爱的alert("MM")
- 请按步骤进行,未进行前面的步骤时,请不要做后面的步骤，以免损坏你的数据库.一般不建议做第4,6两步，第4步不安全,有可能损坏数据库或丢失数据
- 数字范围：922337203685477~-922337203685477函数代码如下： <％Public Fun
- 选项default-charaset-set=utf8;然后创建一个数据表 create table a_table(b varchar(2
- 现将几种主要情况进行小结： 一、如何输入NULL值 如果不输入null值，当时间为空时，会默认写入"1900-01-01"
- 很多网友在浏览网页时应该会发现很多网页有显示时间和日期的功能，这个不难，使用可视化网页制作软件Drea
- 要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是，凡事都应该带着OO的思想来看问题，也勉强可以凑数拉。其实，早在零几年就有人提
- 1、root函数格式root()功能描述返回一个路径串变量应用代码'sample string = c:\intels\jingca
- 流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、ＰＤＡ小屏幕上都能得到良好的呈现。但是，糟糕的代码结
- 随着 CSS3 渐入人心，Web 字体逐渐成为话题，这种即将让未来的 Web 更加丰富多彩的技术（或者说标准）拥有多种可能，虽然 .webf
