首頁 > 開發者 > JavaScript
利用css設定半個文字的樣式代碼執行個體，css樣式代碼
利用css設定半個文字的樣式代碼執行個體:
通常情況下，設定文字的樣式，效果都是範圍整個文字的，比如設定它的顏色，那麼整個文字都會變色，下面介紹一下如何給文字的一部分設定指定的樣式，希望能夠給需要的朋友帶來一定的協助。
代碼如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">.antzone{ position:relative; display:inline-block; font-size:80px; color:black; overflow:hidden; white-space:pre; }.antzone:before{ display:block; z-index:1; position:absolute; top:0; left:0; width:50%; content:attr(data-content); overflow:hidden; color:#f00;}</style></head><body><span class="antzone" data-content="s">s</span><span class="antzone" data-content="o">o</span><span class="antzone" data-content="f">f</span><span class="antzone" data-content="t">t</span> </body></html>
上面的代碼實現了我們的要求，字串中的文字只有一半被設定為紅色，下面簡單介紹一下它的實現原理。
一.實現原理:
效果看起來很炫，其實原理非常的簡單，就是利用:before虛擬元素選取器和content屬性結合使用，為span元素內添加一個虛擬元素，同時為元素的內容設定為span元素的data-content屬性值，並且設定它為絕對位置使其覆蓋在原來的span元素之上，寬度為原來span元素的一半，然後再設定這個為元素中字型的顏色，這樣就實現了我們的要求，看起來是一個文字，其實是兩個文字疊加覆蓋的效果。
二.相關閱讀:
1.:before可以參閱CSS的偽對象選擇符before/E::before一章節。
2.content屬性可以參閱CSS的content屬性一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14781
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
