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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
在php MYSQL中插入当前时间
2008/04/06 PHP
深入php多态的实现详解
2013/06/09 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
javascript代码优化的8点总结
2018/01/29 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
几个人围成一圈的问题
2013/09/26 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
网络书店创业计划书
2014/02/07 职场文书
文案策划求职信
2014/04/14 职场文书
党委工作总结2015
2015/04/27 职场文书
七一活动主持词
2015/06/29 职场文书
感恩的心主题班会
2015/08/12 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
Golang 对es的操作实例
2022/04/20 Golang