CSS opakidad/transparente

透明度 ang attribute ay nagtatalaga ng opakidad/transparente ng elemento.

matitipon na imahe

透明度 ang saklaw ng halaga ng attribute ay 0.0-1.0. Ang mas mababa ang halaga, mas malambot ang opakidad:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

实例

img {
  透明度: 0.5;
}

Subukan ang iyong sarili

matitipon na epekto ng pagpuntirya

透明度 ang attribute ay karaniwang may kaugnayan sa :hover paggamit ng selector, upang baguhin ang opakidad kapag may pagpuntirya ng mouse:

Tulip
Tulip
Flower

实例

img {
  透明度: 0.5;
}
img:hover {
  opacity: 1.0;
}

Subukan ang iyong sarili

Pagsasalin ng halimbawa

Ang unang bloke ng CSS ay katulad ng kodigo sa halimbawa 1. Gayundin, ayon sa aming dagdag, mayroon kaming epekto kapag ang gumagamit ay nagpupuntirya ng mouse sa isa sa mga imahe. Sa ganitong sitwasyon, kapag ang gumagamit ay nagpupuntirya ng imahe, gusto naming na ang imahe ay hindi matitipon. Ang CSS na ito ay 透明度:1;。

當鼠標指針離開圖像時，圖像將再次透明。

反向懸停效果的例子：

Tulip
Tulip
Flower

实例

img:hover {
  透明度: 0.5;
}

Subukan ang iyong sarili

透明盒

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

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

实例

div {
  opacity: 0.3;
}

Subukan ang iyong sarili

使用 RGBA 的透明度

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

100% 透明度
60% 透明度
30% 透明度
10% 透明度

您已經從我們的 CSS Color 這一章中學到了可以將 RGB 用作顏色值。除 RGB 外，還可以將 RGB 颜色值與 alpha 通道（RGBA）一起使用 - 该通道規定顏色的不透明度。

RGBA 颜色值指定為：rgba(red, green, blue, alpha)。 alpha 參數是介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。

提示：您將在我們的 CSS Color 這一章中學到有關 RGBA 颜色的更多知識。

实例

div {
  background: rgba(76, 175, 80, 0.3) /* 不透明度為 30% 的綠色背景 */
}

Subukan ang iyong sarili

透明盒中的文本

這是一些位於透明框中的文本。

实例

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>Ang teksto na ito ay nasa transparent na boks.</p>
  </div>
</div>
</body>
</html>

Subukan ang iyong sarili

Pagsasalin ng halimbawa

Unang-una, nilikha namin ang isang <div> element na may kulay ng background image at border (class="background").

Pagkatapos, nilikha namin ng isa pang <div> sa unang <div> (class="transbox").

<div class="transbox"> ay may kulay ng background at border - ang div na ito ay transparent na.

Sa transparent na <div>, nagdagdag kami ng teksto sa loob ng <p> element.