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
投稿猜你喜欢
效果图：作用：将页面中的电话号码生成图片格式。<％Public Sub Com_CreatValidCode(pT- 集合 (set)1、由不同的元素组成，用{ }大括号括起来，用，逗号隔开2、无序的3、集合中的元素必须是比可变类型4、集合会自动去重例如：s
- 一、系统简介实现一个学生信息的管理系统：主要功能有：添加学生信息删除学生信息修改学生信息查询学生信息显示学生信息退出当前系统二、步骤分析显示
- 本文实例讲述了PHP简单检测网址是否能够正常打开的方法。分享给大家供大家参考，具体如下：这是一个检测网址是否能正常打开的PHP代码，通过下面
- 准备工作：首先，我们需要 import 几个工具包，一个是 python 标准库中的 wave 模块，用于音频处理操作，另外两个是 nump
- python 在传入字典参数到函数中时总是需要检查键是否齐全，每次手工写总是觉得太麻烦。所以还是自己写一个比较方便。#Check if th
- 这篇文章主要介绍了Python实现结构体代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 基本的字符串位置查找方法Python 查找字符串使用 变量.find("要查找的内容"[，开始位置，结束位置])，开始位
- 目录优化排序查询避免重复获取刚刚修改的数据行懒加载的联合查询优化排序查询自定义变量的一个重要特性是你可以同时将该变量的数学计算后的结果再赋值
- 一、定义函数在Python中可以使用def关键字来定义函数，命名规则跟变量的命名规则是一致的。在函数名后面的圆括号中可以放置传递给函数的参数
- 译者：AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜，但它在使用中也会产生一系列的问题，本文对使用Alp
- Gradio 是做什么的？先决条件：Gradio 需要 Python 3.7 或更高版本，仅此而已！gradio.app/quickstar
- ImageEnhance模块提供了一些用于图像增强的类。一、ImageEnhance模块的接口所有的增强类都实现了一个通用的接口，包括一个方
- 下面给大家分享Python爬虫后获取重定向url的两种方法，具体内容如下所示；方法（一）# 获得重定向url from urllib imp
- 问题问题1：如何解决事务提交时flush redo log带来的性能损失WAL是实现事务持久性(D)的一个常用技术，基本原理是将事务的修改记
- 概述业务数据的上报主要分为：各个路由的PV上报；用户的点击行为上报；用户操作结果（分享是否成功）的数据上报等；通用和必须上报的数据，均在上报
- 简介mplcursors包也可以为matplotlib提供交互式的数据光标（弹出式注释框），它的灵感来源于mpldatacursor包，可以
- 前言：今天教大家通过Python进行Socket网络编程（做一个聊天程序），可以实现在不同的主机（电脑）之间进行通话。具体效果如何，接着往下
- /** * 递归法实现的快速排序 * @param $seq * @return array */f
- 二分查找Binary Search的思想：以有序表表示静态查找表时，查找函数可以用二分查找来实现。二分查找（Binary Search）的查
