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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
js 替换
2008/02/19 Javascript
js+css在交互上的应用
2010/07/18 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
华为C++笔试题
2014/08/05 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
给幼儿园老师的表扬信
2014/01/19 职场文书
实习感想范文
2015/08/10 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
Python制作春联的示例代码
2022/01/22 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技