【标题段落背景颜色】CSS背景样式

我们平时看的网页有多种背景风格。例如，有些以有用的颜色为背景，有些以绘画为背景。添加背景样式可以更好地查看网页。那么，如何设置页面的背景样式呢？这就是本节要学习的内容。

背景颜色

首先，让我们看一下如何设置背景颜色。浏览器页面的默认背景颜色是白色。但是，为了页面的美丽，通常会重新设置背景颜色。通常，一个站点的大多数页面使用统一的背景颜色。

可以通过CSS的background-color属性设置背景色。这个属性接受任何有效的颜色值，包括颜色名称、十六进制颜色值、RGB颜色等。

可以为所有元素(Body、h1、P、A、div等)设置背景颜色。

例如：

例如，将页面的背景色设置为#E0E0E0，标题的背景色设置为绿色#33CC66，段落的背景色设置为白色#FFFFFF。

！DOCTYPE

Html

头(电影)

meta charset=' utf-8 '

学习标题CSS标题

link rel=' style sheet ' type=' text/CSS ' href=' index . CSS '

/head

菩提

H1协校欢迎您！/h1

p段落背景为白色/p

p段落背景为白色/p

p段落背景为白色/p

/body

/html

索引。CSS页面的CSS样式代码：

Body{

background-color : # e 0 e 0 e 0；

}

H1{

background-color : # 33 cc 66；

}

P{

background-color : # fffff；

}

浏览器显示的效果如下：

如果使用外部样式，请在HTML页面上。不要忘记导入CSS文件。否则，将不会应用CSS代码。

现在可以尝试background-color属性。假设body标签内有div标签，则必须设置div标签的样式，如宽度300px、背景颜色#FF9966。还有，在浏览器中打开这个页面会有什么效果？

背景图像

除了可以将元素的背景设置为多种颜色外，还可以将背景设置为图片，还可以使用background-image属性设置背景图片。属性值的格式为URL(“图片地址”)。

例如：

我们准备了一张310×210玫瑰花的照片(大家可以自己找一张照片进行测试)，然后将这张照片设置为body标签的背景图片，并使用标签选择器设置样式。

Body{

Background-image: URL(.)；

}

浏览器显示的效果如下：

上图中，背景图片设置成功，但图片重复了多张。为了避免背景图片重复，必须使用background-repeat属性。

背景重复

使用Background-repeat属性可以设置背景图片是否重复(平铺)。

可选属性值包括：

在实际应用中，一般我们使用的比较多的属性值是no-repeat，设置图片也不会重复。

例如：

让我们看一下这些属性值的演示。例如，将背景图片设置为水平重复。

Body{

白库格隆德

-image: url(.);
background-repeat: repeat-x;
}

在浏览器中演示效果为：

也可以将属性值设置为 no-repeat，用于设置背景图片不重复：

body{
background-image: url(.);
background-repeat: no-repeat;
}


在浏览器中演示效果为：

图像尺寸

上述示例中，如果我们希望整张背景图片都充满整个页面，可以使用 background-size 属性来实现，此属性用于设置背景图像的尺寸。

可选的属性值如下所示：

示例：

例如我们将背景图片设置为覆盖全部背景区域，可以使用 cover 属性值：

body{
background-image: url(.);
background-repeat: no-repeat;
background-size: cover;
}


在浏览器中演示效果为：

背景定位

背景定位就是我们可以根据需求将背景图片定位到页面的左边、右边、中间、底部等等任意位置，要实现背景定义，可以使用 background-position 属性。

可选的属性值如下所示：

属性值描述top、bottom、left、right 、 center通常这些关键字会成对出现，如果只设置一个关键字，那么第二个值将默认为 centerx% y%将属性值设置成百分比，第一个值是水平位置，第二个值是垂直位置xpos ypos单位是像素，第一个值是水平位置，第二个值是垂直位置

示例：

例如将背景图片定位到水平垂直居中位置：

body{
background-image: url(.);
background-repeat: no-repeat;
background-position: center;
}


在浏览器中演示效果为：

上述代码中，我们将 background-position 的属性值设置成了 center，并且因为此属性的属性值是成对出现的，如果没有设置第二个属性值，则其默认为 center，所以最终背景图片会水平垂直居中显示。

你可以自己动手设置 background-position 属性的值，例如将背景图片定位为 bottom right、100px 200px、30% 70%，看看这三组属性值最终会生成什么效果。

背景关联

我们知道当页面的内容超出了浏览器的高度时，浏览器会自动出现滚动条。如果我们给某个页面设置了一个背景图像，随着滚动条向下滚动，背景图片也会跟着滚动，大家可以自己动手验证一下看看是不是这样。

所以如果我们希望背景图片固定在某个地方，当我们滚动滚动条时，不影响背景图片，要怎么办呢？

可以通过 background-attachment 属性来实现，此属性的作用就是用于设置背景图片是否固定或者随着页面的其余部分滚动。

可选的属性值如下所示：

示例：

将背景图片设置为固定，不随滚动条滚动：

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


在浏览器中演示效果为：

可以看到当我们将 background-attachment 属性设置为 fixed 时，向下滚动滚动条时，背景图像是固定不变的。

简写背景样式

我们可以通过 background 属性来简写上述讲到的几个背景样式属性。

background 属性可以简写的属性有如下所示 ：

在 background 属性中设置上述任意一个或多个属性的属性值，如果不设置其中的某个值，也不会出问题。

示例：

例如可以在 background 属性中同时设置页面背景颜色、背景图片、图片不平铺、图片固定、图片居中：

body{
background: pink url(.) no-repeat fixed center;
}


在浏览器中演示效果为：

上图中，如果我们不使用简写属性，则需要写 5 句 CSS 代码才能实现，但是通过使用 background 属性一句代码就搞定了，方便了很多。所以推荐使用 background 属性来设置背景样式。

总结

那么本节我们关于背景样式的内容就学到这里，其实这些属性都很简单，大家可以将上述讲到的几个属性多使用几次，给它们设置不同的属性值，看看不同的属性值的演示效果有什么不同。