在網頁設計中,有時我們需要隱藏一些敏感文本信息,如密碼、銀行卡號等。為了保護用戶隱私,我們可以使用 CSS 技術將這些文字隱藏起來,并以點或星號的方式顯示。
.hide-text { text-indent: -9999px; background-repeat: no-repeat; background-position: center; overflow: hidden; } .hide-text-dot { background-image: radial-gradient(circle, #000 10%, transparent 10.5%); background-size: 15px 15px; }
以上是兩個常見的 CSS 樣式,實現隱藏文本并顯示點的方式。
第一個樣式.hide-text
實際上是將文本縮進到容器之外,然后使用背景圖像來覆蓋文本。這樣就可以實現隱藏文本的效果。
而第二個樣式.hide-text-dot
則使用了 CSS 漸變來生成一系列圓點,然后作為背景圖像顯示在文本上方。這樣就可以讓文本被點遮蓋,從而達到隱藏的效果。
除了以上兩種方式,還有許多其他的隱藏文本方法,可以根據實際需求進行選擇。例如通過設置字體大小為 0,使用 CSS 偽元素等。
總之,CSS 技術可以使我們更加靈活地控制文本的顯示方式,為網頁設計提供了更多樣式和效果選擇。