CSS 不透明度 / 透明度
شفافية 属性指定元素的不透明度/透明度。
透明图像
شفافية 属性的取值范围为 0.0-1.0。值越低，越透明：
opacity 0.2
opacity 0.5
opacity 1
مثال
img {
opacity: 0.5;
}
透明悬停效果
شفافية 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：
مثال
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
例子解释
Kwamtar CSS canjin tana da yana da kama kamar kudade 1. Bata a kan haka, a kuma taimaka kama a dadda tsaki a cikin saukar kan kowane tasiri. A wannan yanayin, a kaiwa saukar tsaki a cikin saukar yana nufin saukar ya zama yadda yadda. wannan CSS ne opacity:1;.
عندما يترك المؤشر الفأرة الصورة، ستكون الصورة شفافة مرة أخرى.
مثال على تأثير العكس عند التمرير فوق الصورة:
مثال
img:hover {
opacity: 0.5;
}
صندوق شفاف
استخدام شفافية عندما يتم إضافة شفافية إلى خلفية العنصر، تنقل جميع العناصر الفرعية نفس الشفافية. قد يجعل النص داخل العنصر الشفاف صعب القراءة:
مثال
div {
opacity: 0.3;
}
استخدام شفافية RGBA
إذا كنت لا تريد تطبيق شفافية على العناصر الفرعية، مثل المثال أعلاه، استخدم RGBA قيمة الألوان. في المثال التالي، يتم تعيين لون الخلفية وليس شفافية النص:
لقد تعلمت من CSS 颜色 في هذا الفصل تعلمت كيفية استخدام RGB كقيمة الألوان. بالإضافة إلى RGB، يمكنك أيضًا استخدام RGB قيمة الألوان مع قناة alpha (RGBA) - هذه القناة تحدد شفافية الألوان.
RGBA الألوان المحددة كالتالي: rgba(red, green, blue, alpha) alpha المعدلات هي أرقام بين 0.0 (شفاف تمامًا) و 1.0 (غير شفاف تمامًا).
نصيحة:ستتعلم في CSS 颜色 في هذا الفصل تعلمت المزيد عن RGBA الألوان.
مثال
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>
这是一些位于透明框中的文本。