CSS3之多背景background使用示例


Posted in HTML / CSS onOctober 18, 2013

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的兼容情况
CSS3之多背景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>

预览效果:
CSS3之多背景background使用示例 
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)默认状态
CSS3之多背景background使用示例 
(2)hover状态
CSS3之多背景background使用示例 
CSS3之多背景background就为大家介绍完了,希望能对大家有所帮助。CSS3之多背景background在CSS3的项目中运用比较广泛,大家有更好的案例要积极分享哟。

HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 #HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 #HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 #HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
You might like
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
理解javascript闭包
2015/12/15 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
python中yaml配置文件模块的使用详解
2018/04/27 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python reverse反转部分数组的实例
2018/12/13 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python十进制转二进制的详解
2020/02/07 Python
Python运行异常管理解决方案
2020/03/09 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
我爱我家教学反思
2014/05/01 职场文书
2014年国庆标语
2014/06/30 职场文书
中学清明节活动总结
2014/07/04 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
试用期自我评价范文
2015/03/10 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android