网页中怎样设置背景色呢？

2024-11-23 15:37:14

网页中我们可以设置标签元素的背景颜色，这看起来似乎很简单，不过，想要深入理解背景颜色也并非那么简单哦。今天小编我就来教教大家怎样在网页设计中怎样设置背景颜色吧！

操作方法

01

如图，设置一个div，并且给这个div添加一个类，类名随便取。
02

接着我们定义bg这个类的属性，这里我就先设置宽高，这样方便我们待会观察它的颜色变化。
03

如图，设置背景颜色是通过background属性来设置的，我们可以使用单词来作为background的属性值，red表示红色，这样，当我们设置red之后，div就会填充红色。
04

如图，这就是预览效果，其他颜色单词还有green（绿色），yellow（黄色），black（黑色）等等。但是通过单词来定义只是得到比较简单的颜色。
05

接着我们还可以使用rgb()来定义颜色，rgb表示的是红色蓝三色组合，里面有三个参数，三个参数从0到255，0表示没有颜色，当全部为0则表示黑色，如果第一个为255，其他两个为0，则表示红色，依次类推为红绿蓝，如图，我就设置rgb(0,255,0)。
06

这样，我们的div就会填充为绿色。
07

而如果我们三个参数都进行设置，它们的颜色就会混合，得到不一样的颜色效果。
08

如图，设置之后，就可以得到绿蓝效果，偏绿，蓝色较少。
09

此外，还可以通过rgba来设置颜色，rgba跟rgb相比，就是多了个a，其他参数一样，第四个参数表示的是透明度，通过它，我们就可以调整透明度，透明度从0到1，如图，我就设置了0.3的透明度。
10

这样，原本蓝色的div就会变得比较透明。
11

此外，还可以通过十六进制表示颜色，如图，使用16进制表示颜色要加个#号，然后后面跟上6个参数，这些参数是从0到f范围，当全部是0的时候表示黑色。
12

如图，使用十六进制设置为黑色效果。
13

如图，每两位组合，代表红绿蓝，当#ff0000则表示红色。
14

而当#00ff00则表示绿色。蓝色则以此类推。我们通过从0到f变化，则可以得到不同的颜色哦。

赞 (0)

电脑版浏览器网页中怎么设置不再弹出窗口

电脑版浏览器软件被很多人使用,用来浏览网页,查询资料等,有的用户在使用该软件时,每次浏览网页,都会看到一些弹窗,觉得非常麻烦,因此想要设置不再弹出窗口,但是却不知道如何设置,那么小编就来为大家介绍一下 ...
电脑上网页中怎么设置字体大小？

在电脑浏览网页的过程中,如果觉得字体大小看的不舒服,你知道该怎么调整吗?快来看看吧! 操作方法 01 方法一:打开浏览器,点击右上角三个点. 02 点击缩放旁边的加减键即可调整字体大小. 03 方法二 ...
电脑中如何设置为IE浏览器网页历史记录加密

电脑中如何设置为IE浏览器网页历史记录加密 1.打开IE浏览器,点击右上角的"工具"--"Internet选项"; 2.切换至"内容"选项卡 ...
电脑中的腾讯管家怎么设置屏蔽网页中的弹出广告

今天给大家介绍一下电脑中的腾讯管家怎么设置屏蔽网页中的弹出广告的具体操作步骤.1. 首先打开电脑,找到桌面上的腾讯电脑管家软件,双击打开.2. 进入主页面后,点击左侧的[工具箱]选项,在右侧打开的页面 ...
在PS软件中如何设置前景色和背景色

我们在使用Photoshop软件编辑图片的时候,想要设置前景色个背景色,该怎么操作呢?今天就跟大家介绍一下在PS软件中如何设置前景色和背景色的具体操作步骤.1. 首先打开电脑,找到桌面上的PS软件图标 ...
win10系统电脑中如何设置IE浏览器才能忽略网页上的指定颜色

在win10系统电脑内使用IE浏览器的时候,如果想要浏览器自动忽略网页中的指定颜色的话,应如何设置呢?接下来就由小编来告诉大家.具体如下:1.第一步,打开电脑并在桌面上找到IE图标,双击打开.2.第二 ...
在2345浏览器中怎么设置多窗口模式显示网页

我们在使用2345浏览器的时候,想要设置多窗口模式显示网页,该怎么操作呢?今天就跟大家介绍一下在2345浏览器中怎么设置多窗口模式显示网页的具体操作步骤.1. 首先打开电脑上的2345浏览器,进入主页 ...
网页中的盒子模型内边距的设置（31）

前面教大家设置盒子模型的边框,这一篇主要教大家设置盒子模型的内边距,就是介于边框和内容区的部分也就是真正装东西的地方,之间的部分我们叫做内边距,设置内边距,可以使我们调节内容区的位置,而不影响盒子 ...
网页中的盒子模型外边距的设置（32）

前面我们介绍了盒子模型的内边距的设置,下面我们来教大家给一个元素的盒子模型设置外边距,设置外边距可以对元素在网页中的定位起到作用,盒子模型的外边距就是盒子的边框以外的部分了,同样盒子模型的外边距不 ...