css opacity

作者：噬血啸月发布日期:2025-05-13 浏览:47

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

/* 鼠标悬停时改变透明度 */
.element-on-hover {
  opacity: 0.3; /* 初始透明度为30% */
  transition: opacity 0.5s; /* 平滑过渡效果 */
}

.element-on-hover:hover {
  opacity: 1; /* 鼠标悬停时变为完全不透明 */
}

解释说明：

opacity 属性用于设置元素的透明度。它的取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
在第一个示例中，.transparent-element 类的元素将始终具有 50% 的透明度。
在第二个示例中，.element-on-hover 类的元素初始透明度为 30%，当鼠标悬停在其上时，透明度会平滑过渡到 100%（完全不透明）。

上一篇：css边框

下一篇：css动画效果网站