`

CSS3多重背景

 
阅读更多
1.CSS3方法:
  Multipe Background
CSS3中,仅需要在Background中追加多条的背景url即可
body{
background:url(....) repeat-x 300% 0, url(.....) ...}
但是,由于CSS3支持的速度不迟人意,所以使用了CSS2.1中的伪类:before  :after模似类似这样的效果。
此方法支持:FireFox3.5+,Safari4+,Chrome4+,Opera10+,IE8+
显示的层级顺序为:

content  ->   after  -> before  -> element
内容       ->   :after -> :before  ->元素本身

为了让伪类显示位置准确,需要做定位,相对参照点为元素本身。
因此,要加上:position : relative ;
伪类自已则用:position : absolute;

#a{position:relative;background:url(.....)}
#a:after,#a:before{position:absolute;content:"";...}
#a:after{background:transparent url(....)}
#a:before{background:transparent url(...)}

分享到:
评论

相关推荐

    CSS3 For Web Designers

    第五章《Multiple Backgrounds》探讨了CSS3多重背景技术的应用。 - **多重背景的定义**:介绍如何在同一元素上叠加多个背景图像。 - **背景层的排列与定位**:解释如何控制每层背景的位置和大小。 - **创意案例研究...

    HTML5&CSS3网页制作:设置多重背景图像.pptx

    以下将详细讲解如何在 CSS3 中设置多重背景图像。 首先,设置多重背景图像的关键在于使用 `background` 属性。这个属性是一个复合属性,允许你一次性定义所有背景相关的样式,包括颜色、图像、位置、重复方式等。在...

    CSS3超逼真云层背景动画特效

    首先,CSS3的多重背景图片是实现云层效果的基础。在CSS3中,我们可以为一个元素设置多个背景,每个背景可以有不同的定位和叠放顺序。这使得我们可以将多张云朵图片堆叠在一起,形成层次感,从而模拟出天空中云层的...

    CSS3背景图滑动视差效果幻灯片特效代码

    这种特效利用了CSS3的多重背景、渐变、过渡和 transform 属性,使得背景图像在滑动时呈现出与前景元素不同的速度,从而创造出深度感和立体感。 **一、CSS3多重背景** 在CSS3中,我们可以为一个元素设置多个背景,...

    CSS 控制首页背景

    这种多重背景的设计技巧可以创造出更加丰富和层次感强的视觉效果。 ### 实践建议 为了更好地控制首页背景,以下几个实践建议值得考虑: 1. **响应式设计**:确保背景图像和颜色适应不同设备屏幕大小,提供一致的...

    你值得拥有的css3权威3

    - **多重背景**:使用background-image属性可以同时设置多个背景图层。 - **圆角边框**:通过border-radius属性可以设置元素的圆角。 - **边框阴影**:使用box-shadow属性可以为元素添加阴影效果,增强视觉层次感。 ...

    七彩绚丽背景透明css3模板_七彩 透明 css3 html layout 简单.zip

    在这个模板中,七彩背景的实现可能就利用了CSS3的背景图像渐变和多重背景特性。通过设置不同颜色的线性或径向渐变,可以创造出多彩的视觉效果。同时,CSS3还允许设定元素的透明度,例如使用`opacity`属性或 rgba ...

    CSS3实例分享之多重背景的实现(Multiple backgrounds)

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式)、background-position(设置背景图片在容器中的位置)、background-attachment...

    83套HTML5+CSS3+DIV网页模板

    CSS3还带来了边框和背景的新特性,如圆角、阴影、渐变、多重背景,以及响应式设计的媒体查询,使网页能够适应不同设备的屏幕尺寸。此外,CSS3还支持动画和过渡效果,让网页交互更加生动。 在这83套网页模板中,你...

    firefox5+firebug1.8+xpath_checker0.4.4

    Firefox 5引入了一些新特性,如HTML5的Web Audio API支持、CSS3多重背景和边框图像的支持,以及对WebM视频格式的改进等。此外,它还提高了性能和稳定性,提升了用户界面的响应速度。 **Firebug 1.8**: Firebug是一...

    CSS2和CSS3的参考手册(chm格式)

    这个手册可能会包含一些高级特性和实验性的功能,如CSS变量、渐变、阴影、多重背景、3D转换、滤镜以及动画等。这些特性极大地丰富了网页的表现力,使得设计师可以创建出更加动态和引人入胜的用户体验。 通过学习...

    CSS3_For_Web_Designers

    - **章节概述**:此章节聚焦于CSS3中的多重背景功能,这一特性允许在同一元素上叠加多个背景图像,从而创造出丰富的视觉层次感。 - **关键知识点**: - **多重背景基础**:介绍如何使用`background-image`和`...

    HTML5+CSS3从入门到精通 源码和示例

    5. 背景和边框:引入渐变、阴影、多重背景等功能,增强视觉效果。 6. 文本特效:如文本阴影、文本溢出处理、文字装饰等,丰富了文字的表现力。 书中1-13章的源码和示例覆盖了这些核心概念,并逐步引导读者实践应用...

    css3鼠标悬停动画

    在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多创新特性,其中鼠标悬停动画就是一种增强用户体验的重要方式。通过利用CSS3的:hover伪类和各种动画属性,我们可以创建出丰富多彩的交互效果,使得用户在...

    CSS3实现多背景展示效果通过CSS3定位多张背景

    首先,我们来看一下CSS3中的多重背景语法。你可以使用逗号 `,` 分隔每个背景图像声明,这些声明按照它们在代码中出现的顺序叠加。例如: ```css background: url(image1) no-repeat, url(image2) repeat-x, url...

    Html+css3入门必读

    以及CSS 使用现状、CSS 过渡、鼠标悬浮效果的制作、CSS 旋转、多重背景、表单设计等CSS3 中最为重要的特性及应用方法。 本书出自资深互联网专家之手,深刻探索了HTML和CSS最为关键的核心内容。 对于Web前端开发的...

    HTML5+CSS3知识讲解

    CSS3还提供了许多新的视觉效果,包括文字阴影(text-shadow)、盒阴影(box-shadow)和渐变效果(gradients),以及多重背景图片。这些效果的实现,无需依赖图片和复杂的JavaScript,可以通过纯CSS代码实现,这对于...

    CSS3教程 传智播客

    - **多重背景**:可以在一个元素上设置多个背景图片。 - **圆角边框**:通过`border-radius`属性轻松实现圆角效果。 - **阴影效果**:使用`box-shadow`可以为元素添加阴影效果。 3. **文字与字体** - **文本...

Global site tag (gtag.js) - Google Analytics