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 相关文章推荐
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
Python实现二叉搜索树
2016/02/03 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
2014年开学第一课活动方案
2014/03/06 职场文书
国窖1573广告词
2014/03/21 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书