要在一個字的單個字母的空格內添加bg顏色

我想爲在單詞中有空格的單個字母添加顏色。要在一個字的單個字母的空格內添加bg顏色

例如，如果我們有一個單詞名稱'是'，我需要填寫字母'o'和'e'的顏色，其中我需要字母空間內的顏色。一封信的空間就是我的要求。

我附上了一張圖片，檢查字母'o，B，P'，這個字母在空間內有bg顏色。 check this image

來源

2015-05-21 Sri

不可能的CSS。 –

@Paulie_D爲什麼它不可能告訴我？ – Sri

**它只是沒有。**你不能有多色字體，並且沒有辦法爲一個字符的各個部分着色。角色的背景也應用於所有角色，而不僅僅是角色的一部分。 –

這是完全可能的，即使使用CSS而已，但你必須創建每個字母和字體定製的解決方案，而且，必須用它需要這個CSS中跨度的信件，並給予他們適當的類。

檢查筆：

http://codepen.io/anon/pen/LVRLap

h1 { 
 
    font-size: 100px; 
 
    font-family: Verdana; 
 
} 
 
.fill-letter { 
 
    position: relative; 
 
} 
 
.fill-letter:after { 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
} 
 
.o:after { 
 
    background-color: orange; 
 
    height: 45%; 
 
    left: 25%; 
 
    top: 30%; 
 
    width: 50%; 
 
    z-index: -1; 
 
}

<h1>H<span class="fill-letter o">O</span>ME</h1>

來源

2015-05-21 13:50:20 connexo

這將工作，是的，但是對於創建字體樣式的時間量，你會在這附近在接下來的十年裏......有成千上萬的字體可供使用，許多字母有「漏洞」。 – jbutler483

沒有人要求提供適用於每種字體的解決方案。我假設OP需要一個* one *字體的解決方案 - 這個工作可能會像1個或2個小時。 – connexo

要在一個字的單個字母的空格內添加bg顏色

回答

相關問題