CSS3教程(5):网页背景图片


Posted in HTML / CSS onApril 02, 2009

背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。
背景图片/纹理有很多种使用方式,常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视,我们可以应用多背景图和背景图片尺寸来实现更完美的效果。
上一篇文章:CSS3教程(4):网页边框和网页文字阴影
CSS3的背景图片大小可以写成 background-size:Apx Bpx;
-Apx = x轴(图片宽度)
-Bpx = y轴(图片高度)
了解了这些,我们开始体验这个特性吧:
最好支持CSS3背景大小的浏览器是Safari和Opera,所以我们只需要使用-o和-webkit前缀。 背景大小
CSS3教程(5):网页背景图片
#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; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…)
    为了在CSS3中应用多背景图片,我们使用都好隔开,例如:
    background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
    我们可以在一行代码中尝试放置多个不同的图片… 多背景图
    CSS3教程(5):网页背景图片
    #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; }
    浏览器支持:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 #HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 #HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
You might like
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python算的上脚本语言吗
2020/06/22 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
学校万圣节活动方案
2014/02/13 职场文书
机修工工作职责
2014/02/21 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
户籍证明书标准模板
2014/09/10 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
大学生自荐材料范文
2014/12/30 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
新课程改革心得体会
2016/01/22 职场文书
导游词之安徽九华山
2019/09/18 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL