我不能讓文本內部的陰影（不正確的結果）

我創建的文本內陰影時遇到的一個問題。這個方法我試過（一些CSS不會在這樣的在線編譯器的工作，但代碼可見）：我不能讓文本內部的陰影（不正確的結果）

.text { 
 
    background-color: #565656; 
 
    font-size: 35px; 
 
    color: transparent; 
 
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5); 
 
    -webkit-background-clip: text; 
 
    -moz-background-clip: text; 
 
      background-clip: text; 
 
}

<div class="text"> 
 
Text 
 
</div>

結果是淺灰色的文字，但我需要的文本不同的顏色。當我試圖改變文字顏色和陰影顏色（不是字母）時，很明顯，顯然，「背景剪輯：文字;」不要削減文字區域的陰影，我會看到字母輪廓之外的模糊輪廓。

這是發生了什麼（文本和陰影顏色都錯了，但重疊可見）：

而這正是我需要的：

來源

2016-08-19 Rumata

你有沒有在所有的瀏覽器這個問題呢？或幾個？ – Mojtaba

http://jsfiddle.net/NeqCC/ –

@Paulie_D謝謝你，但這裏同樣的問題，你可以，如果你改變背景顏色看：http://jsfiddle.net/L83jntfw/我的背景是一種重複模式：不同顏色的文字。 – Rumata

通過使用背景顏色與主要陰影顏色相同是可能的，但可能有其他方式，但這是我所知道的最常見的方式。

源代碼 - https://codepen.io/vincicat/pen/zikrC

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #def; 
 
} 
 

 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    line-height: 1em; 
 
    text-align:center; 
 
} 
 

 
.inset-text { 
 
    /* Shadows are visible under slightly transparent text color */ 
 
    color: rgba(10, 60, 150, 0.8); 
 
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def; 
 
} 
 

 
/* Don't show shadows when selecting text */ 
 
::-moz-selection, ::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

<h1 class="inset-text">Inset text-shadow trick</h1>

來源

2016-08-19 20:25:37

非常感謝你，但我有一個不同的顏色，文本顏色和陰影... – Rumata

.text { 
 
    font-size: 50px; 
 
    display:flex; 
 
    justify-content: center; 
 
    font-stretch: ultra-expanded; 
 
    color: rgb(96, 32, 24); 
 
background-color: rgb(186, 186, 186); 
 
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg); 
 
text-shadow: rgb(224, 224, 224) 1px 1px 0px; 
 
}

<div class="text"> 
 
Text 
 
</div>

來源

2016-08-19 20:27:52 Arif

非常感謝你的背景圖案，它給了我一個浮雕大綱文本，但它需要彩色背景。在我的情況下，背景是一種不同顏色的圖案。而且，據我所知，它不會創建一個內在的影子，而是以它的影子的顏色來描繪文本。 – Rumata

@MaximVelichkin檢查當前的答案...使用背景圖像 – Arif

非常感謝你，這是創建一個文本擠壓輪廓的好方法！但我需要一點點不同的效果（我需要文字有一個內部的陰影，顏色與文本的顏色不同）。 – Rumata

我不能讓文本內部的陰影（不正確的結果）

回答

相關問題