CSS 不透明度 / 透明度
opacity
属性指定元素的不透明度/透明度。
透明图像
opacity
属性的取值范围为 0.0-1.0。值越低,越透明:

opacity 0.2

opacity 0.5

opacity 1
နိုင်ငံ
img { opacity: 0.5; }
透明悬停效果
opacity
属性通常与 :hover
选择器一同使用,这样就可以在鼠标悬停时更改不透明度:



နိုင်ငံ
img { opacity: 0.5; } img:hover { opacity: 1.0; }
例子解释
第一个 CSS 块类似于实例 1 中的代码。此外,我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图像不透明。这条 CSS 是 opacity:1;
。
当鼠标指针离开图像时,图像将再次透明。
反向悬停效果的例子:



နိုင်ငံ
img:hover { opacity: 0.5; }
透明盒
使用 opacity
属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读:
နိုင်ငံ
div { opacity: 0.3; }
RGBA အကျယ်ဝင်သည့် အခြေခံ အရေးယူချက်
အကြောင်းကြားရန် မရှိဘဲ အကျယ်ဝင်သည့် အသုံးပြုခြင်း မျိုးစား အား အပေါ်တွင် ရှိသည့် အသုံးပြုခြင်း အား အခြေခံ အရေးယူချက် အသုံးပြုပါ။ အခြေခံ အရေးယူချက် အား အသုံးပြုခြင်း အား အခြေခံ အရေးယူချက် အသုံးပြုခြင်း သည် အကျယ်ဝင်သည့် အသုံးပြုခြင်း အတွင်းရှိ အခြေခံ အရေးယူချက် အား ကြည့်တွေ့မှုအကျယ်ဝင်သည့် ကြောင်း ဖြစ်ပေါ်နိုင်သည်。
သင်သည် ကျွန်ုပ်၏ 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>这是一些位于透明框中的文本。