CSS的透明效果是非常常見的，它可以讓網頁的元素變得更加美觀、清晰、有層次感。那么如何寫出CSS的透明效果呢？

/* 使用rgba設置透明度 */
background-color: rgba(0, 0, 0, 0.5);
/* 在CSS3中使用opacity屬性實現透明度 */
opacity: 0.5;
/* 使用偽元素來實現透明效果 */
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
/* 圖片透明效果 */
opacity: 0.5;

以上是幾種實現CSS透明效果的方式，具體使用哪一種方式，取決于具體的需求和效果展示。其中，第一種方式是最為常見的，通過rgba設置顏色的透明度實現的。其中，rgba中的最后一個參數就是透明度，可以通過調整該參數的值來實現不同的透明度。比如，如果你想要半透明的黑色，可以設置為“background-color: rgba(0, 0, 0, 0.5);”。

第二種方式是通過CSS3中的opacity屬性來實現透明度。該屬性的值為0-1之間的數字，0代表完全透明，1代表不透明。通過調整該屬性的值，可以實現不同的透明效果。

第三種方式是使用偽元素來實現透明效果。通過給偽元素設置背景顏色，并設置為相對定位，然后利用絕對定位覆蓋原來的元素，就可以實現透明效果。

最后一種方式是針對圖片的透明效果。通過設置圖片的opacity屬性，可以實現圖片的透明效果。