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中,通过background-im、age等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。 background: background-color background-image background-position background-repeat background-...
这是一款CSS3超逼真云层背景动画特效。该云层背景动画特效通过多重背景图片,以及CSS animation属性来制作逼真的云层运动动画。
对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式)、background-position(设置背景图片在容器中的位置)、background-attachment...
以及CSS 使用现状、CSS 过渡、鼠标悬浮效果的制作、CSS 旋转、多重背景、表单设计等CSS3 中最为重要的特性及应用方法。 本书出自资深互联网专家之手,深刻探索了HTML和CSS最为关键的核心内容。 对于Web前端开发的...
CSS背景动画很长时间以来都是一个热门话题,很多时候都是因为效果特别绚丽,而且不需要...最近有人问我是否可以给页面上一个指定的元素安排多重背景动画,答案是yes….虽然有些限制因素。让我们来看看如何实现这个效果
在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。 支持的浏览器:Firefox 3.5+, ...
主要介绍了@keyframes规则实现多重背景的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点重要基础内容 1、访问协议 2、图片标签的使用 3、HTML 列表 ...9、CSS样式的引入 10、CSS选择器 11、CSS高级选择器 ...13、CSS-伪类选择器【整个...16、CSS 背景 17、表格及边框 18、导航菜单案例
01-多重背景 02-背景图片的起始点 03-背景缩放 04-盒子阴影 05-文字阴影 06-滑动门技术 07-内减模式 08-过渡 09-商品偏移过渡 10-背景位置也可以实现过渡 11-泡泡小按钮 12-2D转换之移动 13-移动是移动至某一个点 14...
内容关键词:CSS样式、渐变边框、盒子、多重背景图像、背景剪辑、边框颜色属性。 用途:本文旨在帮助前端开发人员掌握如何使用CSS样式为盒子设置渐变边框,提高网页设计的美观程度。同时,本文提供了两种不同的实现...
CSS3奇思妙想,使用CSS3在单独标签内部实现各类图形。 除去一些需要背景衬托的图形,本项目中所有图形插入单标签图形,即使用一个标签完成整个图案。 演示链接 描述 CSS3奇思妙想,单标签实现分类图形 使用SVG或...
14.6 应用多重背景 288 14.7 使用渐变背景 290 14.8 为元素设置不透明度 295 14.9 生成内容的效果 297 14.10 使用sprite拼合图像 299 第15章 列表 301 15.1 创建有序列表和无序列表 301 15.2 ...
Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image...
我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮,无需使用JavaScript,通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名,需要的朋友可以参考下
你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框,并定义元素的填充和边距。 同时,你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后,以及向某些选择器...