gtxyzz

用css定义html背景颜色

gtxyzz web技术 2022-07-05 780浏览 0

用css定义html背景颜色

用CSS 背景属性来定义HTML元素的背景。(图片颜色都可以)

CSS 属性定义背景效果:

background-color 颜色

background-image 图片

background-repeat 重复设置

background-attachment 背景附着

background-position 设置背景图像的开始位置。

背景颜色

background-color 属性用来指定元素的背景颜色.

实例:

页面的背景颜色使用在body的选择器中

body {
background-color:#b0c4de;
}

在CSS中,颜色的值通常由以下方式定义:

有效的颜色名称 - 如:"red"

十六进制 - 如:"#ff0000"

RGB - 如:"rgb(255,0,0)"

其他元素

也可以为任何 HTML 元素设置背景颜色:

实例

在这里,<h1>、<p> 和 <div> 元素将拥有不同的背景色:

h1 {
background-color:#6495ed;
}
p {
background-color:#e0ffff;
}
div {
background-color:#b0c4de;
}

以下为输出实例

我是标题实例,h1

这是 div 元素内的文本。

我是div中的段落p

我们是 div 中的普通元素。

————————————————————————————————————————

不透明度 / 透明度

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

实例

div {
  background-color: green;
  opacity: 0.3;
}

注意:使用 opacity 属性为元素的背景添加透明度时,其所有子元素都会继承相同的透明度。有可能造成透明后的文本无法阅读

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度,例如上面的例子,请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度:

RGB 值

为红绿蓝三原色。用三原色来进行配色每个颜色从255到0

rgb(red, green, blue),rgb(255, 255, 255) 为白色,rgb(0, 0, 0)为黑色

rgb(255, 0,0)为红色,rgb(0, 255,0)为绿色  rgb(0, 0,255)为蓝色 

RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。

实例

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}


继续浏览有关 css 的文章
发表评论