CSS<背景>

1.css3简介

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

2.css3背景

<css3>概览
有几个很棒的背景属性,它们提供了对背景更强大的控制。

  • backgroud-size: 规定背景图片的尺寸。
  • background-orgin:规定背景图片的定位区域。
  • backgroud-clip:规定背景的绘制区域。

<浏览器的支持>
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera (这些浏览器支持css3背景属性)

(1)baground-size(规定背景图片的尺寸)

body{

background: url(给你的背景插入一张图片)
background-size(规定你背景图的大小)
background-repeat(使你的背景图向下延伸)
padding-top(你的背景距离顶部的距离)

}
设置背景尺寸的方式有如上四种方法。
<*数值定义>

设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 auto。
<*百分比>(略)

(2)background-orgin(规定背景图片的定位区域)

body{

background-origin:content-box;(背景图像填充框的相对位置)

background-origin:border-box;(背景图像边界框的相对位置)

background-origin:padding-box;(背景图像的相对位置的内容框)

}
背景图的位置

(3)backgroud-clip(规定背景的绘制区域)

body{

background-clip:content-box;背景绘制在内容方框内(剪切成内容方框)
background-clip:padding-box; 背景绘制在衬距方框内(剪切成衬距方框)
background-clip:border-box;默认值。背景绘制在边框方框内(剪切成边框方框)
}

附:###背景- 简写属性###

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

注:以上内容若有错误请及时告诉我。

    原文作者:dawdler_Bo
    原文地址: https://segmentfault.com/a/1190000015605876
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞