css透明度属性opacity

作者：〖掉望发布日期:2025-08-08 浏览:44

/* 设置元素的透明度 */
.transparent-element {
  opacity: 0.5; /* 透明度为50%，1为完全不透明，0为完全透明 */
}

/* 示例：hover时改变透明度 */
.opacity-change-on-hover {
  opacity: 1; /* 默认完全不透明 */
  transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

.opacity-change-on-hover:hover {
  opacity: 0.3; /* 鼠标悬停时透明度变为30% */
}

解释说明：

opacity 属性用于设置元素的透明度。其值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
在第一个示例中，.transparent-element 类将元素的透明度设置为 0.5，即半透明。
第二个示例展示了如何在鼠标悬停时动态改变元素的透明度，并使用 transition 属性使透明度变化具有平滑过渡效果。

上一篇：css 单位

下一篇：css多余文字显示省略号