CSS設定一個文字兩種顏色

admin發表於2018-06-25
CSS

CSS可以將一個文字設定為兩種顏色，下面介紹一下如何實現此效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.antzone{
  display:inline-block;
  font-size:80px;
  line-height:80px;
  color:#000;
  position:relative;
  overflow:hidden;
  white-space:pre;
}
.antzone:before{
  position:absolute;
  left:0;
  top:0;
  color:#f00;
  display:block;
  width:30%;
  content:attr(data-content);
  overflow:hidden;
}
</style>
</head>
<body>
<span class="antzone" data-content="螞">螞</span>
<span class="antzone" data-content="蟻">蟻</span>
<span class="antzone" data-content="部">部</span>
<span class="antzone" data-content="部">部</span>
</body>
</html>

上面的程式碼實現了我們的要求，下面簡單介紹一下它的實現過程。

一.實現原理:

原理非常的簡單，通過:before偽物件選擇器，給span元素新增一個偽元素。

將此偽元素設定為絕對定位，這樣就可以覆蓋於原來span元素的內容之上。

然後為此偽元素設定和原來span元素一樣的文字內容，並設定顏色，最後通過控制偽元素寬度的方式來設定文字的變色範圍。

二.相關閱讀:

（1）.:before參閱CSS before/E::before一章節。

（2）.相對定位和絕對定位參閱css absolute絕對定位和relative相對定位一章節。

（3）.attr()參閱CSS的函式取值attr()一章節。

（4）.content參閱CSS的content屬性一章節。

相關文章