用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中的段落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% 不透明度的绿色背景 */ }
转载请注明:IT运维空间 » web技术 » 用css定义html背景颜色
发表评论