CSS渐变文本与透明背景

Question

参考图片

HTML模拟

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

备注

Answer 1

您可以定义svg的{​​{1}}并将其应用于linearGradient s'text。

fill

Answer 2

您可以拥有1x100px gradient image并将其覆盖在文字上。它不是纯粹的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

使用background-clip

的纯css解决方案

: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>