前端开发

这个实例我们利用background-image属性为p元素添加背景图像。

实例代码

在添加网页背景时，要注意文本和背景的协调性，这个实例就是网页背景不协调的结果，会影响文本的阅读。

实例代码：

background-image属性设置图像背景，例如：background-image:url(img/paper.jpg);  后面注意要加图像路径。

实例代码：

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。注意：字体不会变透明。

实例代码：

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

实例代码：

在这里我们对p元素，h1元素，div元素设置背景颜色

实例代码：

background-color: 设置元素的背景颜色。

实例代码：

HSLA 值

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

HSLA 颜色值指定为：

通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影：

实例代码：

亮度

颜色的明暗度可以描述为要赋予颜色多少光，其中 0％ 表示不亮（黑色），50％ 表示 50％ 亮（既不暗也不亮），100％ 表示全明（白）。

运行代码：