css background详解

来源:互联网 发布:数据分析报告范例 编辑:程序博客网 时间:2024/06/03 20:39

最近在做网页时,频繁用到了background这个css属性,想做下总结。

background:顾名思义,意味着某个元素的背景。我们可以用这个特性为元素添加背景、修改背景颜色、背景位置、背景大小、以及背景的展现方式。下面依次介绍这些属性。

background-color:背景颜色

background-image: 背景图片

background-position: 背景位置,设置背景在元素里显示的位置,即背景可以显示在元素的任意位置。

background-size:   背景大小,设置背景在元素里显示的大小,即背景可以是任意大小。

background-repeat: 背景是否重复以覆盖整个元素。如果背景图片比元素小,则该选项可以设置背景图片是否重复以铺满整个元素。

常用的background 属性列举如上。

我们在列举这些属性时,一般会缩写,如backgroud: white url(path/to/image) center/ 100px 100px no-repeat,这些属性依次代表background-color 、background-image、background-position、background-size、background-repeat。

需要注意的是,background-position和background-size由于取值范围一样,浏览器会无法区分,会出现background-size没有效果的情况,这个时候,需要写成background-position/background-size的形式,这样浏览器才能正确识别。至于为什么要这么写??还需要深入研究一下。。。。

0 0
原创粉丝点击