当前位置:首页 > css相关 > 正文内容

三剑客实战之Css入门基础知识[CSS 背景属性定义]

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 个颜色名称。

例如:blueredcoralbrown 等:定义不同的颜色名:

#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; /* 蓝色边框色 */
}


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/52.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

Css 及 Html5之初学者基础教程[前端语言基础]

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS(一) HTML5:超文本标记语言1) :基本概念Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )Ö这些标签以<标签名称>的形式出现,用于标记...

三剑客实战之Css入门基础知识[css控制颜色]

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。CSS 文本颜色下面是简单设置文本的颜...

 三剑客实战之Css入门基础知识[css边框属性教程一]

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

css外边距合并外边距合并:定义为当两个垂直外边距相遇时,将形成一个外边距。合并之后的外边距高度是等于两个发生合并的外边距高度中的较大者。外边距合并(叠加)在实践中对网页进行布局时,它会造成许多混淆。也是一个相对比较简单的概念。当一个元素出...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。