我不能让文本内部的阴影（不正确的结果）

我创建的文本内阴影时遇到的一个问题。这个方法我试过（一些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

我不能让文本内部的阴影（不正确的结果）

回答

相关问题