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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
WHOIS类的修改版
2006/10/09 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php输入数据统一类实例
2015/02/23 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
公务员诚信承诺书
2014/05/26 职场文书
社区矫正工作方案
2014/06/04 职场文书
经济管理专业求职信
2014/06/09 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年部门工作总结
2014/11/12 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle