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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
萌新的HTML5 入门指南
Nov 06 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
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP简单日历实现方法
2016/07/20 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
解析Python中的二进制位运算符
2015/05/13 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python 动态绘制爱心的示例
2020/09/27 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
2016年中秋节寄语大全
2015/12/07 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python