CSS3之多背景background使用示例
发布时间：2013-10-18 11:28:09 作者：佚名 
我要评论
我要评论CSS3之多背景background和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了，其在CSS3的项目中运用比较广泛，大家有更好的案例要积极分享哟
CSS3中新加了多背景这个属性，和CSS2的使用方法一样，只不过图片可以从1个图片变成多个图片了。在CSS3中多背景的使用是非常常见的，所以，这个多背景的属性应用很普遍的，所以掌握CSS3之多背景background是当务之急呀。
一、background的语法
1、background的分写
复制代码
代码如下:background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];
2、background的简写
复制代码
代码如下:background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];
二、background的兼容情况
三、background的实例
1、圆角效果
CSS代码：
复制代码
代码如下:.a {width:300px;}
.b {background:url("http://www.leemagnum.com/img/left.jpg") no-repeat left top,
url("http://www.leemagnum.com/img/right.jpg") no-repeat right top;padding:0 10px;}
.b div {background:url("http://www.leemagnum.com/img/mid.jpg") repeat-x left top;height:48px;}
HTML代码：
复制代码
代码如下:<div class="a">
<div class="b">
<div>梦龙小站</div>
</div>
</div>
预览效果：
2、多背景图片
CSS代码：
复制代码
代码如下:div {width:300px;height:80px;border:1px solid #000;
background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat,
url("http://www.leemagnum.com/img/a.jpg") no-repeat right -300px;
-webkit-transition:0.5s background-position ease;
}
div:hover {background-position:0 0,right 0;}
HTML代码：
复制代码
代码如下:<div></div>
预览效果：
(1)默认状态
(2)hover状态
CSS3之多背景background就为大家介绍完了，希望能对大家有所帮助。CSS3之多背景background在CSS3的项目中运用比较广泛，大家有更好的案例要积极分享哟。
相关文章
- 前几天在工作的时候遇到一个问题，项目需要实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，通过网上查找资料看到有人推荐可以使用Css3来实现，后来试了2016-11-08
- 这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感2016-10-19
- 这篇文章主要介绍了CSS3条纹背景制作的实战攻略,根据Forefox浏览器和webkit内核的浏览器两种情况来分别讲解,需要的朋友可以参考下2016-05-31
- 这篇文章主要介绍了使用CSS3实现多列布局与多背景的技巧,包括多列栏目的高度平衡和多间隙等一些细节方面的调整方法讲解,需要的朋友可以参考下2016-02-29
- 这篇文章主要介绍了用CSS3实现背景渐变的方法,作者并没有给出效果demo这个比较残念...需要的朋友可以参考下2015-07-14
- background-size是css3提供的一个新特性，它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方2014-09-02
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
使用CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量2014-08-19- CSS背景动画很长时间以来都是一个热门话题，很多时候都是因为效果特别绚丽，而且不需要额外的技术。最近有人问我是否可以给页面上一个指定的元素安排多重背景动画，答案是y2014-04-04
- CSS3背景尺寸Background-size，这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小，下面为大家详细介绍下其语法、浏览器兼容及使用示例，感兴趣的朋友2013-10-14
- 这篇文章主要介绍了css3背景,CSS3规范中对背景这一部分，新加入了一些令人兴奋的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。2017-07-11
最新评论