CSS样式表基础(六)——CSS3背景

8、CSS3 背景

1) CSS3 多重背景图片
CSS3允许设置多个背景图像。
如:background-image: url(image/背景1.jpg), url(image/chrome.png);

2) background-size 属性,背景图片的尺寸
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
background-size 属性的值有以下几种:

  1. 宽度和高度的具体值,如:background-size: 800px 600px;
    若只规定宽度或高度的其中一个具体值,那么另一个未设定的值将根据已设定的值按原比例拉伸。

  2. 宽度和高度的百分比,如:background-size: 90% 100%;
    若只规定宽度或高度的其中一个百分比,那么另一个未设定的值仍为100%。

  3. contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

  4. cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

3) background-origin 属性
background-origin 属性规定背景图片的定位区域。背景图片可以放置于

content-box、padding-box 或 border-box 区域。
有以下三个值

  1. padding-box 背景图像相对于内边距框来定位。
  2. border-box 背景图像相对于边框盒来定位。
  3. content-box 背景图像相对于内容框来定位。

4) background-clip 属性
background-clip 属性规定背景的绘制区域。
有以下三个值

  1. border-box 背景被裁剪到边框盒。
  2. padding-box 背景被裁剪到内边距框。
  3. content-box 背景被裁剪到内容框。
全部评论

相关推荐

Twilight_m...:还是不够贴近现实,中关村那块60平房子200万怎么可能拿的下来,交个首付还差不多
点赞 评论 收藏
分享
06-17 21:57
门头沟学院 Java
白友:噗嗤,我发现有些人事就爱发这些,明明已读不回就行了,就是要恶心人
点赞 评论 收藏
分享
07-25 11:26
清华大学 Java
打开电脑,思绪又回到了7月份刚开始的时候,感觉这个月过的如梦如幻,发生了太多事,也算是丰富了我本就是平淡的人生吧太早独立的我习惯了一切都是自己做决定,拥有绝对的决定权,而且永远不会听取别人的建议。我就是那个恋爱四年出轨的男主啦,感觉既然在牛客开了这个头,那我就要做个有始有终的人。从我出轨到结束再到和女朋友和好如初真的太像一场梦了,短短的一个月我经历了太多,也成长了很多,放下了那些本就不属于我的,找回了那些我不该放弃的。我的人生丰富且多彩,但人不能一直顺,上天总会让你的生活中出点乱子,有好有坏,让你学会一些东西,让你有成长。我和女朋友的恋爱四年太过于平淡,日常除了会制造一些小浪漫之外,我们的生活...
段哥亡命职场:不得不说,我是理解你的,你能发出来足见你是个坦诚的人,至少敢于直面自己的内心和过往的过错。 这个世界没有想象中那样非黑即白,无论是农村还是城市,在看不见的阴影里,多的是这样的事。 更多的人选择站在制高点去谩骂,一方面是社会的道德是需要制高点的,另一方面,很多人不经他人苦,却劝他人善。 大部分的我们,连自己生命的意义尚且不能明晰,道德、法律、困境,众多因果交织,人会迷失在其中,只有真的走出来之后才能看明白,可是没走出来的时候呢?谁又能保证自己能走的好,走的对呢? 可是这种问题有些人是遇不到的,不去追寻,不去探寻,也就没了这些烦恼,我总说人生的意义在过程里,没了目标也就没了过程。 限于篇幅,没法完全言明,总之,这世界是个巨大的草台班子,没什么过不去了,勇敢面对,革故鼎新才是正确,祝你早日走出来。查看图片
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务