Css样式–背景样式详解

2020-05-05 07:11:33易采站长站整理

背景:

1.背景属性都不能继承

2.背景色:其默认值是 transparent。transparent 有“透明”之意 h1 {background-color: #00ff00}

3.背景图像:背景重复 背景定位


p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;background-repeat: repeat-y;<code>background-position:center;</code>}

背景重复:repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

背景定位:为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

4.关键字

图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。

根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 – 一个对应水平方向,另一个对应垂直方向。

如果只出现一个关键字,则认为另一个关键字是 center。

所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:


p
{
background-image:url(‘bgimg.gif’);
background-repeat:no-repeat;
background-position:top;
}

下面是等价的位置关键字:

单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft center 或 center left

5.百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:


body
{
background-image:url(‘/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:50% 50%;
}

这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:


body
{
background-image:url(‘/i/eg_bg_03.gif’);
background-repeat:no-repeat;