CSS<背景>

2018-07-12 08:00:27来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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;}

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:鼠标移动 登陆框跟随

下一篇:前端记录