Создание прозрачного текста в CSS и размещение фонового изображения внутри текстовой формы

Question

CSS цвет не имеет прозрачного ввода, то есть все solid. Поэтому я попытался установить непрозрачность с помощью rgba для свойства цвета, но фон изображения не отображается сквозь текст. Есть ли способ сделать это? Итак, есть фоновое изображение и жирный текст сверху, который должен быть прозрачным, показывая только контур букв. 1005 *

Answer 1

Попробуйте следующее:

element.style {
    color: rgba(0,0,0,0.0); /* for transparent color */
    -webkit-text-stroke: 1px rgba(0,0,0,1.0); /* for solid black outline */
}

ОБНОВЛЕНО

Если вам нужно фоновое изображение через текст:

.bg-though-text {
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6); /* Here you can use an image bg */
  
    /* This will start the magic */

    -webkit-background-clip: text; /* This will bring bg shape according to text*/
    -webkit-text-fill-color: transparent; /* This will make text color transparent */
    color: rgba(0,0,0,0.0); /* This will make text color transparent for sure */
}

<p class="bg-though-text">Gradient bg</p>

ОБНОВЛЕНИЕ 2

Прозрачный текст, белый фон и изображение позади.

.bg {
    background-image: linear-gradient(90deg, #a50026, #d3322b, #f16d43, #fcab64, #fedc90, #faf8c0, #dcf1ec, #abd6e8, #76abd0, #4a74b4, #4a74b4);
    padding:20px;
    text-align: center;
}

.transparent-text {
    font-size: 50px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 5px;  
    padding: 5px 10px;
  
  /* Here we go */

    background: #fff;
    color: #000;
    mix-blend-mode: screen;
}

<div class="bg">
    <p class="transparent-text">Transparent text</p>
</div>

ОБНОВЛЕНИЕ 3

Решение SVG, IE11 поддерживает:

.bg {
    background-image: linear-gradient(90deg, #a50026, #d3322b, #f16d43, #fcab64, #fedc90, #faf8c0, #dcf1ec, #abd6e8, #76abd0, #4a74b4, #4a74b4);
    padding:20px;
    text-align: center;
}

<div class="bg">
    <svg viewbox="0 0 100 60">
        <defs>
            <g id="text">
                <text text-anchor="middle" x="50" y="23" font-size="12">Transtarent text</text>
            </g>
            <mask id="mask" x="0" y="0" width="100" height="50">
                 <rect x="0" y="0" width="100" height="40" fill="#fff"/>
                 <use xlink:href="#text" />
           </mask>
       </defs>
    <rect x="5" y="5" width="90" height="30" mask="url(#mask)"  fill="#fff" fill-opacity="1"/>
 </svg>
 </div>

Answer 2

.text {
    opacity: 0.7; /* Can be varied to the transparency you want */
}

opacity изменит прозрачность текста.

Answer 3

Непрозрачность - ваш друг:

#id {
    opacity: 0.5; // For 50% opacity
}