tft每日頭條

 > 科技

 > css編程入門全集

css編程入門全集

科技 更新时间:2024-12-03 16:18:34

css編程入門全集(6.入門編程)1

CSS 背景屬性用于定義元素的背景效果。

您将學習如下 CSS 背景屬性:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color 屬性指定元素的背景色。

實例

頁面的背景色設置如下:

body {background-color: lightblue;}

通過 CSS,顔色通常由以下方式指定:

  • 有效的顔色名稱 - 比如 "red"
  • 十六進制值 - 比如 "#ff0000"
  • RGB 值 - 比如 "rgb(255,0,0)"

其他元素

您可以為任何 HTML 元素設置背景顔色:

實例

在這裡,<h1>、<p> 和 <div> 元素将擁有不同的背景色:

h1 {background-color: green;}div {background-color: lightblue;}p {background-color: yellow;}

不透明度 / 透明度

opacity 屬性指定元素的不透明度/透明度。取值範圍為 0.0 - 1.0。值越低,越透明:

css編程入門全集(6.入門編程)2

實例

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

注意:使用 opacity 屬性為元素的背景添加透明度時,其所有子元素都繼承相同的透明度。這可能會使完全透明的元素内的文本難以閱讀。


使用 RGBA 的透明度

如果您不希望對子元素應用不透明度,例如上面的例子,請使用 RGBA 顔色值。下面的例子設置背景色而不是文本的不透明度:

css編程入門全集(6.入門編程)3

RGBA 顔色值指定為:rgba(red, green, blue, alpha)。alpha 參數是介于 0.0(完全透明)和 1.0(完全不透明)之間的數字。

實例

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

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved