CSS3系列教程:背景图片(背景大小和多背景图) 应用说明


Posted in HTML / CSS onDecember 19, 2012

CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

背景图片/纹理有很多种使用方式,常常用于为添加网站的最佳的界面美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。

CSS3的背景图片大小可以写成 background-size:Apx Bpx;
-Apx = x轴(图片宽度)
-Bpx = y轴(图片高度)

了解了这些,我们开始体验这个特性吧:
最好支持CSS3背景大小的浏览器是Safari和Opera,所以我们只需要使用-o和-webkit前缀。

背景大小

CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

复制代码
代码如下:

#backgroundSize{
border: 5px solid #bd9ec4;
background:url(image_1.extention) bottom right no-repeat;
-o-background-size: 150px 250px;
-webkit-background-size: 150px 250px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

浏览器支持:
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
为了在CSS3中应用多背景图片,我们使用都好隔开,例如:
复制代码
代码如下:

background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

我们可以在一行代码中尝试放置多个不同的图片…
多背景图

CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

复制代码
代码如下:

#backgroundMultiple{
border: 5px solid #9e9aab;
background:url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

浏览器支持:
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
HTML / CSS 相关文章推荐
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 #HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 #HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 #HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 #HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 #HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 #HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 #HTML / CSS
You might like
无限级别菜单的实现
2006/10/09 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
JQuery 入门实例1
2009/06/25 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
js实现随机数小游戏
2019/06/28 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python 中Pickle库的使用详解
2018/02/24 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
建筑工程技术应届生自荐信
2013/09/27 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
青春励志演讲稿
2014/04/29 职场文书
毕业生面试求职信
2014/06/23 职场文书
教师节倡议书
2014/08/30 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
加强作风建设心得体会
2014/10/22 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL