CSS背景

最新推荐文章于 2025-07-23 12:42:11 发布

翻译最新推荐文章于 2025-07-23 12:42:11 发布 · 1.1k 阅读

标签

#CSS #基础

新手java 专栏收录该内容

6 篇文章

订阅专栏

翻译源http://www.w3schools.com/css/css_background.asp

CSS背景属性用于定义元素的背景效果

用于背景效果的属性

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color该属性指定一个元素的背景颜色。
一个页面的背景色是定义在body选择器:
body {background-color:#b0c4de;}
例子：

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>


<body>


<h1>My CSS web page!</h1>
<p>Hello world! This is a JW-COFFEE example.</p>
</body>
</html>

在CSS中,颜色通常是由以下3种指定方式:

一个十六进制值——像“# ff0000”
一个RGB值——像“RGB(255,0,0)”
一个颜色名称,如“red”

请查看博文“CSS有效颜色值”中获取完整的设置颜色值方式。

在下面的示例中,h1,p,和div元素有不同的背景颜色:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
例子

 <!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>


<body>


<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>


</body>
</html>

背景图像

background-image属性设置一个图像作为元素的背景。
默认情况下,该图像可以重复显示，所以它可以覆盖整个元素。
以下例子是将整个页面背景设置为图像：
body {background-image:url(https://blog.csdn.net/'paper.gif');}
例子

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url(https://blog.csdn.net/'paper.gif');}
</style>
</head>


<body>
<h1>Hello World!</h1>
</body>


</html>

注意，当你将一个图像设置为背景时，不要让图片喧宾夺主了内容。文字要可读可看哦~

背景图像——水平或垂直重复

默认情况下,background-image属性在水平方向和垂直方向重复一个图像。
但是有些图片应该只水平重复或只垂直重复,否则就看起来很奇怪,像这样:

如果图像是只水平重复(repeat-x),背景会更好:
body
{
background-image:url(https://blog.csdn.net/'gradient2.png');
background-repeat:repeat-x;
}

背景图像-设置位置，不重复显示

注意：当使用背景图像时，不要让图像影响了文字
通过background-repeat属性，设置仅显示一次图像
body
{
background-image:url(https://blog.csdn.net/'img_tree.png');
background-repeat:no-repeat;
}
通过background-position属性设置图像位置
body
{
background-image:url(https://blog.csdn.net/'img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

背景图像-速写属性

看了上面的例子，你发现使用图像时有许多属性要设置。
为了简化代码，可以将所有的属性写成一个，叫做速写属性。
简单“background”是这样写的
body {background:#ffffff url(https://blog.csdn.net/'img_tree.png') no-repeat right top;}

速写属性的顺序值是：