css2.1实现多重背景和边框效果（2）
作者：linxz 来源：小志博客 发布时间：2010-06-23 19:02:00
标签：背景,边框,css
示例代码：多背景图片
使用这种技术我们可以重现类似于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的多重背景图效果成品。
0
投稿猜你喜欢
- 分页显示是页面常用技术，可用下列代码来实现：<％page=Request.QueryString("page&q
- 但是有时候，可以视看处进逻辑程度，可以把三者写成一个触发器，只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入，删除还是
- 昨天在网上看到一个防采集软件，说采集只访问当前网页，不会访问网页的图片、JS等，今天突然想到，通过动态程序和Js访问分别记录访问者的IP，然
之前整理发表了《XMLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，- 可及，通俗的说是“可以达到”，加上主语和宾语，在“交互设计”这个大的语境下，含义应该是“用户可以达到自己的操作目标”，这不是和“有效性—用户
- asp使用WScript.Shell获取电脑的网络配置信息Option Explicit Dim WSHShe
- 这篇论坛文章（赛迪网技术社区）详细的介绍了在MySQL中使用GRANT语句增添新用户的具体步骤，更多内容请参考下文…&
- { hide_text } CSS文字隐藏总结报告最近整理的一份CSS文字隐藏的demo，总结了几种方法，希望得出一种最完美的方案放进自己的
- Event是Javascript中的重要事件，event代表事件的状态，专门负责对事件的处理，它的属性和方法能帮助我们完成很多和用户交互的操
- 页面中header部分一般位于最上端（有时根据需要也会位于某一侧，不管它在页面中的位置如何，在XHTML代码中它总是优于其它元素先加载），内
- location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.hre
- 这个符合设计标准的三 级向上弹出菜单，纯css代码控制，没有使用javascript脚本，绿色环保，呵呵。兼容性应该更好。截图：<!D
- 在CSS布局中，ul，li的运用是非常常见的。配合DIV与CSS，创建无表格布局。 其实Dreamweaver中也有自带的CSS布局的范例，
- MySQL 拥有一个复杂的但直观易学的 SQL 接口。这个章节描述了各种不同的命令、类型和函数，为了高效地使用 MySQL 需要了解它们。这
- 纯粹的截取字符串其实比较简单,用一个Left就搞定,但一个是全英文标题,一个是全中文标题,或中文混合排在一起,长短不一就很明显了,要考虑到中
- 如今，基本每个网站都会需要到Tab切换展示内容的滑动门效果应用，这种效果可以在更少的页面空间内，展示更多的网站内容，节约空间，方便用户集中操
- 在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了
- 代码如下:function HTMLEncode(fString) fString=Replace(fString,&q
- XML被设计用来描述数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观。
- 自定义数据库自动编号初始值和步进值问题： 如何定义数据库的自动编号字段的初始值和步进值?如何定义自动增加字段的初始值和步进值?如何使删除过数
