CSS 不透明度

CSS 不透明度（opacity）属性用于控制元素的透明度。通过调整不透明度，可以实现元素的淡入淡出效果，或者使元素半透明显示。

语法

selector {
  opacity: value;
}

• selector：需要应用不透明度的元素选择器。
• value：一个介于 0（完全透明）和 1（完全不透明）之间的数值。可以是小数。

示例

以下是一些示例展示不同的不透明度值对元素的影响：

/* 完全透明 */
.selector-1 {
  opacity: 0;
}

/* 半透明 */
.selector-2 {
  opacity: 0.5;
}

/* 完全不透明 */
.selector-3 {
  opacity: 1;
}

注意事项

• 不透明度属性会影响元素及其后代元素的透明度，所以不透明度属性是继承的。
• 如果一个元素设置了不透明度，那么该元素的所有后代元素也会继承同样的不透明度值，直到设置新的不透明度值或使用其他方式修改透明度。
• 不透明度属性不会影响元素的尺寸和布局，只会影响元素的可见性。

兼容性

CSS 不透明度属性的兼容性较好，大多数现代浏览器都支持此属性。然而，对于旧版本的浏览器（如 IE8 及更早版本），可能需要使用其他兼容性解决方案，如使用 filter 属性来实现类似的效果。

总结

通过 CSS 不透明度属性，可以轻松地调整元素的透明度。这一功能可以用于创建各种视觉效果，如淡入淡出、背景图像效果以及创建半透明的元素，为页面增加动态和吸引力。