当前位置:Gxlcms > html代码 > CSS探案之background属性剖析_html/css_WEB-ITnose

CSS探案之background属性剖析_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:44人阅读

首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少

麻烦人家把,反正我是这样 ,几乎也少会用到背景图,原因很简单:就是有点害怕用背景图,感觉很繁琐,什么

尺寸啊,位置啊,是否重复啊等等,听着头都大,所以就一直没有去好好地学习一下它,每次碰见就劝自己“下次再

看吧”,然而“明日复明日,明日何其多”,干脆就解决了它

background是css背景属性的简写,例如这样:background: #00FF00 url(bgimage.gif) no-repeat fixed top;

但是它又可以拆分成下面的几个子属性:

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

这些子属性分别代表什么意思呢?下面开始一个个地为大家介绍

********************分割线*********************

属性一:background-color

如其名,这个属性是设置背景颜色的,有5种可能的值:

1.background-color:red;(已颜色英文名称命名的颜色值)

2.background-color:#ff0000;(十六进制的颜色值)

3.background-color:rgb(255,0,0);(rgb类型的颜色值)

4.background-color:transparent;(默认,背景色为透明)

5.background-color:inherit;(值从父元素继承)

当我们单独设置背景颜色时,background-color:red;和background:red;结果是一样的

属性二:background-image

该属性是定义背景图片的url, 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复

提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。

使用方法:

background-image:url('demo.jpg'); //url中传入背景图的链接

属性三:background-position

该 属性设置背景图像的起始位置。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

代码举例:

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

运行结果:

属性四:background-size

background-size 属性规定背景图像的尺寸。

代码示例:

上面是缩小的背景图片。

原始图片:Flowers

运行结果:

属性五:background-repeat

background-repeat 属性设置是否及如何重复背景图像。

默认地,背景图像在水平和垂直方向上重复。

详细说明

background-repeat 属性定义了图像的平铺模式。

从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。

提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。

代码示例:

运行结果:

属性六:background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

代码示例:

background-origin:border-box:

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

background-origin:content-box:

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

运行结果:

属性七:background-clip

background-clip属性规定背景的绘制区域

代码示例:

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

运行结果:

属性八:background-attachment

background-attachment规定如何设置固定的背景图像

代码示例:

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

图像不会随页面的其余部分滚动。

运行结果:

注意红框里面的滚动条,实际运行时,页面滚动,背景不跟随滚动,但是现在的截图看不出效果,所以对不起各位了

结语:可能大家觉得我这篇文章只是在复制粘贴,没什么意义,确实如此,当我写到一半时,自己就在想放弃,但是

现在想起来,幸亏当时没有把那一半删掉,因为,在写的整个过程中,我先要看一遍w3school的帮助文档,结果还真

是收获不少。 世上没有完全徒劳的事情,我坚信这一点,所以谨以此篇文章作为以后工作的参考

人气教程排行