CSS類爲背景

Question

我有一些形狀爲CSS ID，例如：

#triangle-bottomleft { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid blue; 
    border-right: 100px solid transparent; 
} 

我想用它作爲文字的重複背景。

<h1 class="myClass">My text.</h1> 


.myClass { 
    background: triangle-bottomleft; 
} 

如何處理？

Answer 1

編輯正如我剛纔看到你想使用一個類作爲財產。我認爲現在不可能。你也不能使用實際的「文本」作爲背景值。

你可以做的是使用另一種含文字容器作爲背景position: absolutez-index: -1容器在這裏看到什麼： LINK TO SO

<div id="container"> 
    <div id="background"> 
    Text to have as background 
    </div> 
    Normal contents 
</div> 
And then the CSS: 

#container { 
    position: relative; 
} 

#background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    overflow: hidden; 
} 

編輯OVER

如果使用SASS你可以簡單地@extend .className在任何其他班級。在媒體查詢期間不起作用。此外你需要GRUNT來正確編譯你的SASS文件。

@extend

設計一個頁面時，當一個類應該有 所有樣式另一個類的，以及它自己特定的風格經常有情況。 處理此問題的最常見方法是使用更一般的 類和HTML中更具體的類。例如，假設我們 有一個正常錯誤和嚴重錯誤的設計。我們 可以寫我們的標記，像這樣：

taken from here