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

2016-02-19 23:46 6 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的CSS3教程(5):网页背景图片,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

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

上一篇文章:CSS3教程(4):网页边框和网页文字阴影

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

背景大小

background-size

#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中应用多背景图片,我们使用都好隔开,例如:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

多背景图

background-size

#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)

来源:http://www.tulaoshi.com/n/20160219/1630580.html

延伸阅读
标签: 家居设计
客厅背景墙学问大,有的简约而又带些工业色彩,有的则可扩充空间感,还有大飘窗提升空间质感,更多客厅背景墙图片欣赏,快随小编看看吧! 客厅 设计重点:L型黄色沙发 在这个“小影院”中,主人不仅可以独自享受,还有足够的空间容纳客人一起观影,L型黄色沙发将为主人提供招待客人的空间。 客厅 设计重点:双客厅设计 宽...
一:打开PPT软件,然后右键点击选择设置背景格式。   二:在弹出的面板中我们可以设置背景颜色,在这里有很多的背景选项,我们可以根据自己的需要进行设置哦!例如:选择渐变填充,然后在预设颜色中就有很多渐变效果可以进行选择。   三:图片或纹理设置中,提...
web背景图片在做设计、制作过程中会经常的应用到,有时候我们会因为设计web背景图片伤透脑筋儿,下面介绍的这几个网站可以轻松帮你搞定web背景图片的设计。 bgpatterns.com stripegenerator.com pixelknete stripedbgs tartanmaker.com
标签: Web开发
如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。 比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。 所以一般用作背景图...
·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent(透明色)。 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入...

经验教程

993

收藏

20
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部