具有透明背景的CSS渐变文本

Question

参考图片

HTML模拟

<div class="Title">
    Raffle <span>BANANZA</span>
</div>

笔记

这不必具有梯度，但是将是更可取的。

Answer 1

您可以定义svg的linearGradient并将其应用于text的fill 。

 <svg width="275" height="37"> <style> @import url(http://fonts.googleapis.com/css?family=Slabo+27px); @import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light); text { font-family: 'Slabo 27px', serif; font-size: 40px; font-weight: bold; text-anchor: middle; fill: url(#g1); } text:first-of-type { font-family: 'Shadows Into Light', cursive; font-weight: thin; font-size: 35px; fill: url(#g2); white-space: pre; } </style> <linearGradient id="g1" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#FDCD2D" /> <stop offset="10%" stop-color="#DD881A" /> <stop offset="40%" stop-color="#FCEC76" /> <stop offset="50%" stop-color="#DD881A" /> <stop offset="73%" stop-color="#FCEC76" /> <stop offset="100%" stop-color="#FDCD2D" /> </linearGradient> <linearGradient id="g2" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#D2DAE3" /> <stop offset="25%" stop-color="#D2DAE3" /> <stop offset="40%" stop-color="#FFFFFF" /> <stop offset="50%" stop-color="#839198" /> <stop offset="73%" stop-color="#FFFFFF" /> </linearGradient> <a xlink:href="#"> <text x="50" y="34">Raffle </text><text x="180" y="34">BANANZA</text> </a> </svg> 

Answer 2

您可以使用1x100px的渐变图像，并将其覆盖在文字上。 它不是纯CSS，而是通过禁用覆盖上的指针事件，仍可以选择文本。

HTML：

<div>
    <div class="overlay"></div>
    Raffle <span>BANANZA!</span>
</div>

CSS：

div
{
    font-family: Rockwell;
    font-weight: bold;
    font-size: 75px;

    position: relative;

    color: #999;
}

div span
{
    color: #ea0;
}

div div.overlay
{
    position: absolute;
    width: 100%;
    height: 100%;

    z-index: 1;

    background: url("http://imgur.com/CvFHH8U.png") repeat-x;
    background-size: contain;
    opacity: 0.8;

    pointer-events: none;
}

JSFiddle

Answer 3

使用纯CSS解决方案和background-clip

 :root{background: #ccc} span{ font-family: Rockwell; font-weight: bold; font-size: 75px; position: relative; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(12%,rgba(240,183,161,1)), color-stop(18%,rgba(140,51,16,1)), color-stop(18%,rgba(140,51,16,1)), color-stop(31%,rgba(255,255,255,1)), color-stop(53%,rgba(140,51,16,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(191,110,78,1))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8; pointer-events: none; } 

 <span> RaffleBANANZA!</span>