css2.1实现多重背景和边框效果(2)
作者:linxz 来源:小志博客 时间:2010-06-23 19:02:00
示例代码:多背景图片
使用这种技术我们可以重现类似于Silverback网站中只使用一个HTML元素的多背景图片效果。
该元素拥有自己的背景图片和需要填充的空间。将该元素相对定位后作为其伪元素的绝对定位参考点。使用正值的z-index将有助于伪元素选择合适的z-index值(小志注:对于这句的翻译思考了很久一直没能选择合适的词来表达,主要的意思根据下面的代码我们可以看到是将伪元素的z-index值设置比元素自身的小即可,最好是用负值)。
Copy to clipboard]View Code CSS1
#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将伪元素移到内容层的后面。这样伪元素将会位于元素的背景和边框上面,但是该元素的内容依然可以选择。
Copy to clipboard]View Code CSS1
#silverback:before,
#silverback:after {
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding-top:100px;
}
每个伪元素都拥有一个可重复的背景图片属性。这是实现类型多重背景效果所需要的。
伪元素的content属性允许添加图片内容。这样我们就可以添加两张图片在一个伪元素中。可以通过改变伪元素的其他属性改变图片的位置,例如text-align和padding。
Copy to clipboard]View Code CSS1
#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的多重背景图效果成品。
标签:背景,边框,css
0
投稿
猜你喜欢
ActionScript3.0是革命性的
2008-05-01 12:36:00
巧用正则表达式获取新闻中图片地址
2010-07-17 13:09:00
SQL Server 中死锁产生的原因及解决办法
2008-11-25 11:50:00
SQLserver 2000中出现“指定的服务并未以已安装的服务存在 解决方案
2011-04-27 14:33:00
Design IT. (3),看不懂数据
2009-02-11 10:56:00
解析:校对确定 较为复杂的一些特殊情况
2008-12-17 16:54:00
IE下修改<p>标签的innerHTML出错
2007-11-11 10:12:00
如何设置SQL Server数据库全文索引服务
2009-01-13 13:46:00
触手生春【4.14】CSS与HTML结构
2008-12-09 18:10:00
asp程序定义变量比不定义变量速度快一倍
2012-12-04 20:06:32
一个较新的ASP后门服务端实现代码
2011-02-16 10:41:00
ASP检测服务器相关的一些代码
2008-01-25 19:20:00
采用XMLHTTP编写一个天气预报的程序
2007-10-15 12:35:00
SQLServer 存储过程简介与使用方法
2009-07-07 14:06:00
SEM之医疗网站跳出率 逼迫访客跳出网站的六宗罪
2012-03-05 20:13:36
asp如何计算下载一个文件需要多长时间?
2009-11-25 20:17:00
MySQL中数据表操作详解
2008-12-29 13:50:00
PHP实现表单处理方法详解
2023-05-25 07:39:18
如何在不支持数据库的ASP空间里获取更大的数据库权限?
2010-06-18 19:35:00
Oracle 数据显示 横表转纵表
2009-07-26 08:57:00