/* 使用 opacity 属性设置透明度 */ div { opacity: 0.5; } /* 使用 filter 属性设置透明度 */ div { filter: alpha(opacity=50); }
其中,opacity属性比filter属性更为常用。但需要注意的是,透明度是作用于元素本身以及其子元素的。如果要让子元素不受透明度影响,可以将子元素提升一个层级,并设置position属性为absolute或fixed。
/* 子元素不受透明度影响的实现 */ div { position: relative; } div >span { position: absolute; top: 0; left: 0; z-index: 1; }
除此之外,透明度还可以用于鼠标悬浮、过渡动画等效果的实现。在设计网页时,透明度是一个非常有用的属性,帮助大家营造更多元、更鲜活的视觉效果。