CSS 使得按鈕上的文字隱藏成為可能。可以通過設置文本的透明度或者在按鈕上使用偽元素,來實現按鈕上的文字隱藏效果。
.btn { position: relative; /* 設置相對定位 */ } .btn::after { /* 使用偽元素 */ content: " "; /* 空格占位,必要 */ position: absolute; /* 設置絕對定位 */ top: 0; left: 0; width: 100%; height: 100%; background-color: red; /* 背景色可以替換 */ opacity: .5; /* 不透明度設置為 0.5 */ z-index: 1; /* 偽元素疊加在文字上方 */ } .btn span { position: relative; /* 這里設置相對定位 */ z-index: 2; /* 確保文字在偽元素之上 */ }
上述 CSS 代碼中,我們首先將按鈕容器設置為相對定位,以便在偽元素中定位。然后,我們在按鈕容器中添加了偽元素::after
,并設置其為絕對定位。這里我們設置了偽元素的透明度為 0.5,背景色為紅色,來讓其覆蓋文字。
接著我們在容器中添加一個span
元素來容納按鈕的文本,這里我們將該元素設置為相對定位,確保在偽元素之上。最后,我們通過設置z-index
的值來保證元素層級的正確性。這樣就可以輕松地實現按鈕上的文字隱藏效果。