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和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
web前端之css水平居中代码解析
May 20 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
第五章 php数组操作
2011/12/30 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python调用C/C++的方法解析
2020/08/05 Python
python中pop()函数的语法与实例
2020/12/01 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书