如何使用CSS设置背景颜色和图像-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

用CSS设置背景颜色和图像的方法：1、通过background-color属性设置背景颜色；2、通过background-image属性设置背景图像。

本文操作环境：Windows7系统、HTML5&&CSS3版、Dell G3电脑。

使用CSS设置背景我们需要用到background背景属性，通过background属性我们可以设置背景颜色和背景图像，下面我们就来看看CSS设置背景的具体方法。

我们先来看看CSS设置背景颜色

我们需要使用background-color来改变背景颜色

1	`background-color:value（颜色编码或者颜色名称）`

在值的部分，你可以输入诸如＃000000的颜色代码或诸如white的颜色名称，设置的颜色就为背景颜色。

background-color的初始值是transparent，在这种情况下，将应用父元素的背景颜色。如果父元素中没有设置，它将变为白色。

CSS设置图像背景

通过使用background-image属性，我们可以预先设置上传到服务器的图像作为背景。

1	`background-image:` `url("图像的路径");`

在url中，输入要用作背景的图像文件的路径。如果css文件和图像文件位于同一目录中，则只有文件名就可以了。

绝对路径和相对路径都可以用作图像文件的路径。

要输入相对路径，请输入外部样式表的相对路径，而不是html文件的相对路径。

接着我们来看具体的示例

使用background-color设置背景颜色

代码如下

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body{
      background-color: skyblue;
    }
  </style>
</head>
<body>
<p>背景颜色设置</p>
</body>
</html>

运行结果

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 如何使用CSS设置背景颜色和图像

如何使用CSS设置背景颜色和图像

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论