`

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(...)}

分享到:
评论

相关推荐

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

    在CSS3中,通过background-im、age等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。 background: background-color background-image background-position background-repeat background-...

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

    这是一款CSS3超逼真云层背景动画特效。该云层背景动画特效通过多重背景图片,以及CSS animation属性来制作逼真的云层运动动画。

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

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

    Html+css3入门必读

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

    多重CSS背景动画实现方法示例

    CSS背景动画很长时间以来都是一个热门话题,很多时候都是因为效果特别绚丽,而且不需要...最近有人问我是否可以给页面上一个指定的元素安排多重背景动画,答案是yes….虽然有些限制因素。让我们来看看如何实现这个效果

    css2.1多重背景和边框效果实现原理及代码(图文介绍)

    在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。 支持的浏览器:Firefox 3.5+, ...

    @keyframes规则实现多重背景的CSS动画

    主要介绍了@keyframes规则实现多重背景的CSS动画,代码中使用的是效果图中显示的素材,仅作为脚本示例在此便不提供下载了,需要的朋友可以参考下

    css揭秘,高清文字原版,带书签

    3 灵活的背景定位 22 4 边框内圆角 25 5 条纹背景 27 6 复杂的背景图案 33 7 伪随机背景 43 8 连续的图像边框 46 第 3 章 形状 51 9 自适应的椭圆 52 10 平行四边形 57 11 菱形图片 60 12 切角效果 63 13...

    java关于html+css的18点重要内容

    java关于html+css的18点重要基础内容 1、访问协议 2、图片标签的使用 3、HTML 列表 ...9、CSS样式的引入 10、CSS选择器 11、CSS高级选择器 ...13、CSS-伪类选择器【整个...16、CSS 背景 17、表格及边框 18、导航菜单案例

    网页设计开发之CSS的各种效果的练习作业.rar

    01-多重背景 02-背景图片的起始点 03-背景缩放 04-盒子阴影 05-文字阴影 06-滑动门技术 07-内减模式 08-过渡 09-商品偏移过渡 10-背景位置也可以实现过渡 11-泡泡小按钮 12-2D转换之移动 13-移动是移动至某一个点 14...

    渐变与配色方案.html

    内容关键词:CSS样式、渐变边框、盒子、多重背景图像、背景剪辑、边框颜色属性。 用途:本文旨在帮助前端开发人员掌握如何使用CSS样式为盒子设置渐变边框,提高网页设计的美观程度。同时,本文提供了两种不同的实现...

    magicCss:CSS3奇思妙想,单标签实现分类图形

    CSS3奇思妙想,使用CSS3在单独标签内部实现各类图形。 除去一些需要背景衬托的图形,本项目中所有图形插入单标签图形,即使用一个标签完成整个图案。 演示链接 描述 CSS3奇思妙想,单标签实现分类图形 使用SVG或...

    HTML5与CSS3基础教程(第8版)高清文字

    14.6 应用多重背景 288 14.7 使用渐变背景 290 14.8 为元素设置不透明度 295 14.9 生成内容的效果 297 14.10 使用sprite拼合图像 299 第15章 列表 301 15.1 创建有序列表和无序列表 301 15.2 ...

    实例讲解使用CSS实现多边框和透明边框的方法

    Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image...

    html5 css3 动态气泡按钮实例演示

    我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮,无需使用JavaScript,通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名,需要的朋友可以参考下

    你已经学习了CSS,下一步学习什么呢?

    你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。 同时,你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后,以及向某些选择器...

Global site tag (gtag.js) - Google Analytics