Как я могу сделать градиент текста в CSS, не влияя на фон?

Question

Я хотел бы использовать текстовый градиент на моих заголовках ( этот тип эффекта, в основном).Обычно это достигается с помощью png альфа-прозрачного изображения поверх текста.Моя проблема с этим решением заключается в том, что внутри поля заголовка альфа-прозрачность также влияет на фон.Так что, если, например, я хочу использовать фотографию в качестве фона моих заголовков, это будет выглядеть ужасно.Есть ли способ обойти это (по крайней мере, в некоторых браузерах, для начинающих).

Answer 1

Невозможно сделать это с помощью CSS3 - даже Значения изображений CSS3 и модуль замененного содержимого , хотя он содержит множество интересных вещей, связанных с градиентами , только позволяет использовать их там, где вы сможете использовать изображение, а не цвет.

Тем не менее, SVG позволяет вам делать это , хотя использование его в HTML - это немного работы. Сначала создайте документ SVG с вашим градиентным текстом. Вам понадобится градиент:

<defs>
    <linearGradient id="heading_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:0.1"/>
    </linearGradient>
</defs>

И некоторый текст, к которому его можно применить, обратите внимание на атрибут fill:

<text x="0" y="100"
    font-family="sans-serif" font-weight="bold"  fill="url(#heading_gradient)" >
    <tspan font-size="100">A Big Heading</tspan>
</text>

Тогда вам нужно включить SVG в ваш HTML.

<h1>
    <object data="heading-fill.svg" type="image/svg+xml" height="125" width="800">
        A Big Heading
    </object>
</h1>

Обратите внимание, что без поддержки SVG заголовок должен возвращаться к содержимому, содержащемуся в теге объекта, и все должно быть доступным (я не проверял). Затем настройте CSS так, чтобы резервный контент соответствовал SVG, и добавьте фоновое изображение:

h1 {
    font-size: 100px;
    font-family: sans-serif;
    background-image: url('daisy-grass-repeating-background.jpg');
}

Здесь есть полный пример , у меня работает в Firefox 3.6 / 4, Chromium и Opera 11.01. Это на самом деле не очень читабельно, но я оставлю вам тонкую настройку;) В зависимости от того, какие браузеры вы хотите поддерживать, вам может потребоваться изучить embed вместо object.

Answer 2

Если вы используете его только в нескольких местах, вы можете просто использовать замену изображения:

#the-h1
{
  background: url('the-h1.png') no-repeat left top;
  height: 1em;
  text-indent: 9001px;//it's over 9000
  overflow: hidden;
}

Это не очень хорошее решение, так как вам придется создавать изображение для каждого заголовка, который вы хотитезаменить, но у него есть то преимущество, что он может применять очень специфический шрифт и стиль.