三剑客实战之Css入门基础知识【CSS 背景属性定义】
1年前 (2023-05-31) / 68 次围观 / 0 次吐槽CSS 背景属性:
background-color
background-image
background-repeat
background-attachment
background-position
background-color
background-color 属性指定元素的背景色,
通过 CSS,颜色通常由以下方式指定:
●有效的颜色名称 - 比如 "red"
●十六进制值 - 比如 "#ff0000"
●RGB 值 - 比如 "rgb(255,0,0)"
例:
<html> <head> <style> body { background-color: lightblue; } </style> </head> <body> <p>此页面拥有浅蓝色背景色!</p> </body> </html>
其他元素
任何 HTML 元素设置背景颜色:下面的<h1>、<p> 和 <div> 元素将拥有不同的背景色:
h1 { background-color: green;/*这里的标题控制的背景色是绿色*/ } div { background-color: red;/*这里div元素控制的背景色是红色*/ } p { background-color: yellow;/*本段中的背景为黄色*/ }
不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低,越透明
注意:使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
div { background-color: green; opacity: 0.3;/*透明度为%30*/ }
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度,例如上面的例子,请使用 RGBA 颜色值。RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
div { background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */ }
CSS 背景图像
background-image 属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。页面的背景图像可以像这样设置:
body { background-image: url("图片地址"); }
还可以为特定元素设置背景图像,例如 <p> 元素
p { background-image: url("图片地址"); }
CSS 背景重复
background-repeat
某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,默认情况下,background-image 属性在水平和垂直方向上都重复图像。
水平方向重复 background-repeat: repeat-x;
如需垂直重复图像,请设置 background-repeat: repeat-y;
属性还可指定只显示一次背景图像 background-repeat: no-repeat;
body { background-image: url("图片地址"); background-repeat: no-repeat;/*背景图像仅显示一次*/ }
用于指定背景图像的位置 background-position
如把背景图片放在右上角:
body { background-image: url("图片地址"); background-repeat: no-repeat; background-position: right top; }
CSS 背景附着
background-attachment 属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)指定应该固定背景图像:
body { background-image: url("图片地址"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
如果指定背景图像应随页面的其余部分一起滚动,则利用: background-attachment: scroll;
简写属性
background
如需缩短代码,也可以在一个属性中指定所有背景属性。它被称为简写属性。
如下代码,使用简写属性在一条声明中设置背景属性
body { background: #ffffff url("tree.png") no-repeat right top; }
在使用简写属性时,属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position:
属性值之一缺失并不要紧,只要按照此顺序设置其他值即可。请注意,在上面的例子中,我们没有使用 background-attachment 属性,因为它没有值。
所有 CSS 背景属性
属性 | 描述 |
---|---|
background | 在一条声明中设置所有背景属性的简写属性。 |
background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
background-clip | 规定背景的绘制区域。 |
background-color | 设置元素的背景色。 |
background-image | 设置元素的背景图像。 |
background-origin | 规定在何处放置背景图像。 |
background-position | 设置背景图像的开始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
background-size | 规定背景图像的尺寸。 |
CSS 合法颜色值
CSS 中的颜色可以通过以下方法指定:
十六进制颜色
带透明度的十六进制颜色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器的颜色名称
使用 currentcolor 关键字
RGB 颜色
RGB 颜色值由 rgb() 函数规定,语法如下:
rgb(red, green, blue)
每个参数(red, green, blue)定义颜色的强度,可以是 0 到 255 之间的整数或百分比值(从 0% 到 100%)。例如,值 rgb(0,0,255) 呈现为蓝色,因为 blue 参数设置为其最高值(255),其他参数设置为 0。此外,以下值定义相同的颜色:rgb(0,0,255) 和 rgb(0%,0%,100%)。定义不同的 RGB 颜色:
#p1 {background-color: rgb(255, 0, 0);} /* 红色 */ #p2 {background-color: rgb(0, 255, 0);} /* 绿色 */ #p3 {background-color: rgb(0, 0, 255);} /* 蓝色 */
RGBA 颜色
RGBA 颜色值是 RGB 颜色值的扩展,它带有 Alpha 通道 - 指定对象的不透明度。
RGBA 颜色通过 rgba() 函数规定,语法如下:
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
例如定义带有不透明度的不同 RGB 颜色:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 带不透明度的红色 */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* 带不透明度的绿色 */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* 带不透明度的蓝色 */
HSL 颜色
HSL 指的是色相(hue)、饱和度(saturation)和亮度(lightness)- 代表颜色的圆柱坐标表示。
使用 hsl() 函数指定 HSL 颜色值,该函数的语法如下:
hsl(hue, saturation, lightness)
色相是色轮上的度数(从 0 到 360)- 0(或 360)是红色,120 是绿色,240 是蓝色。饱和度是一个百分比值; 0% 表示灰色阴影,而 100% 是全彩色。亮度也是一个百分比; 0% 是黑色,100% 是白色。
如下定义不同的 HSL 颜色:
#p1 {background-color: hsl(120, 100%, 50%);} /* 绿色 */ #p2 {background-color: hsl(120, 100%, 75%);} /* 浅绿色 */ #p3 {background-color: hsl(120, 100%, 25%);} /* 深绿色 */ #p4 {background-color: hsl(120, 60%, 70%);} /* 柔和的绿色 */
HSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展,它带有 Alpha 通道 - 指定对象的不透明度。
HSLA 颜色值由 hsla() 函数指定,该函数的语法如下:
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
例如定义带有不透明度的不同 HSL 颜色:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* 带不透明度的绿色 */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* 带不透明度的浅绿色 */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* 带不透明度的深绿色 */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* 带不透明度的柔绿色 */
预定义/跨浏览器的颜色名称
HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。
例如:blue
、red
、coral
、brown
等:定义不同的颜色名:
#p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;}
十六进制颜色
用 #RRGGBB 规定十六进制颜色,其中 RR(红色)、GG(绿色)和 BB(蓝色)十六进制整数指定颜色的成分(分量)。所有值必须在 00 到 FF 之间。例如,#0000ff 值呈现为蓝色,因为蓝色分量设置为最高值(ff),其他分量设置为 00。定义不同的 HEX 颜色:
#p1 {background-color: #ff0000;} /* 红色 */ #p2 {background-color: #00ff00;} /* 绿色 */ #p3 {background-color: #0000ff;} /* 蓝色 */
带透明度的十六进制颜色
用 #RRGGBB 规定十六进制颜色。如需增加透明度,请在 00 和 FF 之间添加两个额外的数字。定义带透明度的 HEX 颜色:
#p1a {background-color: #ff000080;} /* 带透明度的红色 */ #p2a {background-color: #00ff0080;} /* 带透明度的绿色 */ #p3a {background-color: #0000ff80;} /* 带透明度的蓝色 */
currentcolor 关键字
currentcolor
关键字引用元素的 color 属性值。以下 <div> 元素的边框颜色将为蓝色,因为 <div> 元素的文本颜色为蓝色:
#myDIV { color: blue; /* 蓝色文本色 */ border: 10px solid currentcolor; /* 蓝色边框色 */ }
相關 软件应用
Url : 【 https://uuucd.cn/software/1813.html 】
额~ 本文暂时没人评论 来添加一个吧 …
发表评论