CSS 不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。

透明图像

opacity 属性的取值范围为 0.0-1.0。值越低,越透明:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

နိုင်ငံ

img {
  opacity: 0.5;
}

亲自试一试

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用,这样就可以在鼠标悬停时更改不透明度:

Tulip
Tulip
Flower

နိုင်ငံ

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

亲自试一试

例子解释

第一个 CSS 块类似于实例 1 中的代码。此外,我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图像不透明。这条 CSS 是 opacity:1;

当鼠标指针离开图像时,图像将再次透明。

反向悬停效果的例子:

Tulip
Tulip
Flower

နိုင်ငံ

img:hover {
  opacity: 0.5;
}

亲自试一试

透明盒

使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

နိုင်ငံ

div {
  opacity: 0.3;
}

亲自试一试

RGBA အကျယ်ဝင်သည့် အခြေခံ အရေးယူချက်

အကြောင်းကြားရန် မရှိဘဲ အကျယ်ဝင်သည့် အသုံးပြုခြင်း မျိုးစား အား အပေါ်တွင် ရှိသည့် အသုံးပြုခြင်း အား အခြေခံ အရေးယူချက် အသုံးပြုပါ။ အခြေခံ အရေးယူချက် အား အသုံးပြုခြင်း အား အခြေခံ အရေးယူချက် အသုံးပြုခြင်း သည် အကျယ်ဝင်သည့် အသုံးပြုခြင်း အတွင်းရှိ အခြေခံ အရေးယူချက် အား ကြည့်တွေ့မှုအကျယ်ဝင်သည့် ကြောင်း ဖြစ်ပေါ်နိုင်သည်。

100% အကျယ်ဝင်သည့်
60% အကျယ်ဝင်သည့်
30% အကျယ်ဝင်သည့်
10% အကျယ်ဝင်သည့်

သင်သည် ကျွန်ုပ်၏ CSS 颜色 ဒီလုံးစဉ်တွင် RGB အရေးယူချက်များ ကို အသုံးပြုနိုင်သည်။ RGB အရေးယူချက် နှင့် အခြေခံ အရေးယူချက်ကို ပေါင်းစပ် အသုံးပြုနိုင်သည် - အခြေခံ အရေးယူချက် သည် အရေးယူချက်၏ အကျယ်ဝင်သည့် အခြေခံ အသုံးပြုသည်。

RGBA အရေးယူချက် သည် rgba(red, green, blue, alpha) alpha အရာများ 0.0(အပြည့်အကျယ် အကျယ်ဝင်သည့်)နှင့် 1.0(အပြည့်အကျယ် အကျယ်ဝင်သည့်)အကြားတွင် ဖြစ်သည့် နှုတ်ချက်များ ဖြစ်သည်。

အကြံပေးသင်သည် ကျွန်ုပ်၏ CSS 颜色 ဒီလုံးစဉ်တွင် RGB အရေးယူချက်များကို တောင်းကြည့်ပါ。

နိုင်ငံ

div {
  background: rgba(76, 175, 80, 0.3) /* အကျယ်ဝင်သည့် 30% သော ကြေးသစ်တော်အော်စ် အခြေခံ */
}

亲自试一试

ပြည့်မျှသော ပေါင်းစားအုပ်

ထိပ်တန်းပေါ်ရှိ အရေးယူချက်များကို ပြထားသည်。

နိုင်ငံ

<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>

这是一些位于透明框中的文本。

亲自试一试

例子解释

首先,我们创建一个带有背景图像和边框的

元素(class="background")。

然后,我们在第一个

中创建另一个
(class="transbox")。

有背景色和边框 - 这个 div 是透明的。

在透明的

内,我们在

元素内添加了一些文本。