Css样式–背景样式详解

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

background-position:66% 33%;
}

如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。

6.长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:


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

注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。

7.背景关联

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:


body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

【重点:背景的样式缩写】

背景(Backgrounds)

背景的属性如下:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;【背景:背景颜色 图片 背景重复 背景关联 背景位置】

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%