服务器之家
您的位置： 首页 编程语言 css

CSS 背景样式

100人浏览   2024-12-06 09:04:18


背景颜色

首先我们来讲如何设置背景颜色，浏览器页面的默认背景颜色为白色，但是很多时候为了页面的美观我们会重新设置一个背景颜色，一般在一个网站中大部分页面都会采用某个统一的背景颜色。

我们可以通过CSS 中的 background-color 属性来设置背景颜色 ，这个属性可以接受任何合法的颜色值，像颜色名称、十六进制颜色值、RGB颜色都可以。

我们可以给所有的元素设置背景色，例如 body、h1、p、a 、div等等。

示例：

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

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>侠课岛欢迎你！</h1>
        <p>段落背景为白色</p>
        <p>段落背景为白色</p>
        <p>段落背景为白色</p>
    </body>
</html>

在 index.css 页面中的 CSS 样式代码：

body{
    background-color: #E0E0E0;
}
h1{
    background-color: #33CC66;
}
p{
    background-color: #FFFFFF;
}

在浏览器中演示效果为：

如果使用的是外部样式要记得在 HTML 页面引入 .css 文件哟，否则 CSS 代码不会生效。

现在你可以试着使用一下 background-color 属性，假设在 <body> 标签内有一个 <div> 标签，我们需要给这个 <div> 标签设置一些样式，例如设置它的宽高分别为300px，背景颜色为 #FF9966 。然后在浏览器中打开这个页面，会产生什么效果呢？

背景图像

我们除了可以将元素的背景设置成各种颜色，还可以将背景设置成图片，可以使用 background-image 属性来设置背景图片。属性值的格式为： url('图片地址') 。

示例：

我们准备了一张 310x210 的玫瑰花图片（大家自己找一张图片来测试也可），然后将这张图片设置为 <body> 标签的背景图片，使用标签选择器设置样式：

body{
    background-image: url(./flower.png);
}

在浏览器中演示效果为：

我们可以看到上图中，虽然背景图片设置成功，但是图片重复很多张，如果我们不想背景图片重复，就需要用到 background-repeat 属性。

背景重复

我们可以使用 background-repeat 属性来设置背景图片是否重复（平铺）。

可选的属性值如下所示：

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

示例：

我们来看一下上述几个属性值的演示效果，例如设置背景图片仅在水平方向重复：

body{
    background-image: url(./flower.png);
    background-repeat: repeat-x;
}

在浏览器中演示效果为：

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

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

在浏览器中演示效果为：

图像尺寸

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

可选的属性值如下所示：

示例：

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

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

在浏览器中演示效果为：


背景定位

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

可选的属性值如下所示：

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

示例：

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

body{
    background-image: url(./flower.png);
    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(./flower.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

在浏览器中演示效果为：


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


简写背景样式

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

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

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

示例：

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

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

在浏览器中演示效果为：

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

总结

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

相关推荐