首页技术文章正文

CSS控制背景颜色和背景图像的方法

更新时间:2022年04月27日18时24分来源:传智教育浏览次数:

网页能通过背景图像给人留下第一印象，如节日题材的网站一般采用喜庆祥和的图片来突出效果，所以在网页设计中，控制背景颜色和背景图像是一个很重要的步骤。下面将详细介绍CSS控制背景颜色和背景图像的方法。

1.设置背景颜色

在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。了解了背景颜色属性background-color，接下来通过一个案例来演示其用法。新建HTML页面，在页面中添加标题和段落文本，然后通过background-color属性控制标题标签<h2>和主体标签<body>的背景颜色，如例5-6所示。
example06.html例5-61

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色</title>
<style type="text/css">
body{background-color:#CCC;}      /*设置网页的背景颜色*/
h2{
    font-family:"微软雅黑"; 
    color:#FFF;
    background-color:#36C;          /*设置标题的背景颜色*/
}
</style>
</head>
<body>
<h2>短歌行</h2>
<p> 对酒当歌，人生几何！譬如朝露，去日苦多。慨当以慷，忧思难忘。何以解忧？唯有杜康。青青子衿，悠悠我心。但为君故，沉吟至今。呦呦鹿鸣，食野之苹。我有嘉宾，鼓瑟吹笙。明明如月，何时可掇？忧从中来，不可断绝。越陌度阡，枉用相存。契阔谈讌，心念旧恩。月明星稀，乌鹊南飞。绕树三匝，何枝可依？山不厌高，海不厌深。周公吐哺，天下归心。</p>
</body>
</html>

在例5-6中，通过background-color属性分别控制标题和网页主体的背景颜色。

运行例5-6，效果如图5-10所示。

图5-10设置背景颜色

在图5-10中，标题文本的背景颜色为红色，段落文本显示父元素body的背景颜色。这是由于未对段落标签<p>设置背景颜色，其默认属性值为transparent(显示透明色)，所以段落将显示其父元素的背景颜色。

设置背景颜色，其默认属性值为transparent(显示透明色)，所以段落将显示其父元素的背景颜色。

2.设置背景图像

背景不仅可以设置为某种颜色，还可以将图像作为标签的背景。在CSS中通过background-image属性设置背景图像。以例5-6为基础，准备一张背景图像，如图5-11所示，将图像放在example06.html文件所在的文件夹中，然后更改body元素的CSS样式代码：

body{
    background-color:#CCC;           /*设置网页的背景颜色*/
    background-image:url(bg.jpg);    /*设置网页的背景图像*/
}

保存HTML页面，刷新网页，效果如图5-12所示。

背景图像自动沿着水平和竖直两个方向平铺，充满整个网页，并且覆盖了<body>的背景颜色。

3.设置背景图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下。repeat：沿水平和竖直两个方向平铺(默认值)no-repeat：不平铺(图像位于元素的左上角，只显示一次)repeat-x：只沿水平方向平铺repeat-y：只沿竖直方向平铺例如，希望上面例子中的图像只沿着水平方向平铺，可以将body元素的CSS代码更改如下。

body{
    background-color:#CCC;            /*设置网页的背景颜色*/
    background-image:url(bg.jpg);    /*设置网页的背景图像*/
    background-repeat:repeat-x;      /*设置背景图像的平铺*/
}

保存HTML页面，刷新页面，效果如图5-13所示。

图5-13设置背景图像水平平铺

在图5-13中，图像只沿着水平方向平铺，背景图像覆盖的区域就显示背景图像，背景图像没有覆盖的区域按照设置的背景颜色显示。可见当背景图像和背景颜色同时存在时，背景图像优先显示。

4.设置背景图像的位置

如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将显示在元素的左上角，如例5-7所示。

example07.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图像的位置</title>
<style type="text/css">
body{
   background-image:url(he.png);   /*设置网页的背景图像*/
   background-repeat:no-repeat;     /*设置背景图像不平铺*/
}
</style>
</head>
<body>
<h2>三国奇闻趣事</h2>
<p>有一次刘备下令蜀中禁止酿酒，结果抓了一户家里有酿酒器材居民，这户居民被治了罪。恰好有一天简雍和刘备乘车出巡，路上见了一男一女，简雍对刘备说：这两个人准备做非法勾当，为什么不抓起来？刘备问：你怎么知道的呢？简雍说：你看啊，它们有作案的工具，不是和有酿酒器材那家人一样吗？刘备听了后笑了笑，赶紧把抓的人放了。</p> 
</body>
</html>

在例5-7中，将主体元素的背景图像定义为no-repeat不平铺。

运行例5-7，效果如图5-14所示，背景图像位于HTML页面的左上角，即<body>元素的左上角。

图5-14背景图像不平铺如果希望背景图像出现在其他位置，就需要使用另一个CSS属性background-position设置背景图像的位置。

例如，将例5-7中的背景图像定义在页面的右下角，可以更改body元素的CSS样式代码：

body{
    background-image:url(he.png);    /*设置网页的背景图像*/
    background-repeat:no-repeat;        /*设置背景图像不平铺*/
    background-position:right bottom;  /*设置背景图像的位置*/       
}

保存HTML文件，刷新网页，效果如图5-15所示，背景图像出现在页面的右下角。

图5-15背景图像位置

在CSS中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，例如上面的“right bottom”。background-position属性的默认值为“00”或“top left”，即背景图像位于元素的左上角。background-position属性的取值有多种，具体如下。

(1)使用不同单位(最常用的是像素px)的数值：直接设置图像左上角在元素中的坐标，例如“background-position:20px 20px;”。

(2)使用预定义的关键字：指定背景图像在元素中的对齐方式。

水平方向值：left、center、right。

垂直方向值：top、center、bottom。

两个关键字的顺序任意，若只有一个值则另一个默认为center。例如：

center   相当于center center（居中显示）
top     相当于top center 或center top（水平居中、上对齐）

(3)使用百分比：按背景图像和元素的指定点对齐。

0% 0%表示图像左上角与元素的左上角对齐。

50% 50%表示图像50% 50%中心点与元素50% 50%的中心点对齐。

20% 30%表示图像20% 30%的点与元素20% 30%的点对齐。

100% 100%表示图像右下角与元素的右下角对齐。

如果取值只有一个百分数，将作为水平值，垂直值则默认为50%。接下来将background-position的值定义为像素值，来控制例5-7中背景图像的位置，body元素的CSS样式代码如下

body{
    background-image:url(he.png);     /*设置网页的背景图像*/
    background-repeat:no-repeat;      /*设置背景图像不平铺*/
    background-position:50px 80px;   /*用像素值控制背景图像的位置*/       
}

保存HTML页面，再次刷新网页，效果如图5-16所示

图5-16控制背景图像的位置

在图5-16中，图像距离body元素的左边缘为50px，距离上边缘为80px。

5.设置背景图像固定

当网页中的内容较多时，但是希望图像会随着页面滚动条的移动而移动，此时就需要学习background-attachment属性来设置。background-attachment属性有两个属性值，分别代表不同的含义，具体解释如下。

scroll：图像随页面一起滚动(默认值)

fixed：图像固定在屏幕上，不随页面滚动

例如下面的示例代码，就表示背景图像在距离body元素的左边缘为50px，距离上边缘为80px的位置固定

body{
    background-image:url(he.png);/*设置网页的背景图像*/
    background-repeat:no-repeat;      /*设置背景图像不平铺*/
    background-position:50px 80px;    /*用像素值控制背景图像的位置*/
    background-attachment:fixed;      /*设置背景图像的位置固定*/  
}

6.综合设置元素的背景

同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下。

background:背景色url("图像") 平铺定位固定;

在上面的语法格式中，各样式顺序任意，中间用空格隔开，不需要的样式可以省略。但实际工作中通常按照背景色、url("图像")、平铺、定位、固定的顺序来书写。

例如，下面的示例代码。

background: url(he.png) no-repeat 50px 80px fixed;

上述代码省略了背景颜色样式，等价于：

body{
    background-image:url(he.png);/*设置网页的背景图像*/
    background-repeat:no-repeat;             /*设置背景图像不平铺*/
    background-position:50px 80px;           /*用像素值控制背景图像的位置*/
    background-attachment:fixed;             /*设置背景图像的位置固定*/  
}

上一篇：border-color属性设置边框颜色【前端CSS教程】 下一篇：移动app有几种开发模式？