如何使用CSS更改背景颜色

在任何崭露头角的前端开发人员职业中,最激动人心的时刻之一就是学习如何更改网页的背景颜色。

使用HTML固然很棒,但只要使用几行CSS,您就可以使您的页面和编程旅程焕发生命。

本指南将涵盖您需要如何使用CSS更改背景颜色的所有知识。

进行设置

让我们进行一些初步的工作。

注意:建议您将Visual Studio CodeLive Server扩展一起使用,以在更新HTML和CSS时实时查看更改。

  1. 为您的项目的文件创建一个文件夹。
  2. 创建一个index.html文件来容纳您的HTML。您可以使用样板代码,也可以只设置一些<html><head><body>标记。
  3. 为CSS创建一个styles.css文件。
  4. 通过将<link rel =“ stylesheet” href =“ styles.css”>放在<head>标记内,将CSS文件与HTML链接

现在,您可以开始编辑CSS了。

相关:如何创建样板网站

如何使用CSS更改背景颜色

更改背景颜色的最简单方法是将body标签作为目标。然后,编辑background-color属性。您可以通过搜索并使用Google拾色器浏览器扩展程序来找到颜色代码

body {
background-color: rgb(191, 214, 255);
}

此代码将背景更改为漂亮的浅蓝色。

background-color属性接受六种不同形式的颜色:

  • 名称lightskyblue; (非常近似)
  • 十六进制代码#bfd6ff;
  • rgbrgb(191,214,255);
  • rgbargba(191,214,255,1);其中a是alpha(不透明度)
  • HSLhsl(218°,100%,87%);
  • HSLAhsla(218°,100%,87%,1);其中a是alpha(不透明度)

使用简写的background属性代替background-color可以削减多余的代码。您可以使用此方法更改任何HTML元素的背景颜色。

创建一个<div>元素并为其提供一个类,在这种情况下,该类为panel 。在CSS中设置其heightwidth属性。在CSS中选择元素,然后将其上色。

 body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

在这里,您可以看到body背景属性的样式独立于.panel背景属性。

background属性还接受渐变:

 body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

带面板的css渐变背景如何在CSS中更改背景图片

如果您希望背景是图像而不是纯色或渐变怎么办?速记背景属性是一个熟悉的朋友。

确保图像与HTML和CSS文件位于同一文件夹中。否则,您将不得不使用括号内的文件路径,而不仅仅是名称:

 body {
background: url(leaves-and-trees.jpg)
}

哇!看起来图像过于放大。您可以使用background-size属性修复该问题。

 body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

要将简写背景属性与background-size属性cover结合使用,还必须指定background-position属性,并用反斜杠分隔值 (即使它们是默认的位置值,例如左上方)

 body {
background: url(leaves-and-trees.jpg) top left / cover;
}

你去!一行CSS中适当大小的背景图片。

阅读更多:如何在CSS中设置背景图片

注意:请谨慎使用包含大量存储空间的大型背景图像。这些内容很难在移动设备上加载,您只有两秒钟的时间让用户有理由停留在页面上。

用CSS box-shadow设置CSS游戏

对于像您这样的开发人员来说,background-color和background-image属性是老新闻。幸运的是,总会有一些新东西要学习。

尝试通过CSS box-shadow增强您的盒子。您的HTML元素再好不过了!