在 CSS 中制作透明文本并在文本形状内拟合背景图像

Posted 2023-03-06

【中文标题】在 CSS 中制作透明文本并在文本形状内拟合背景图像

【英文标题】：Making transparent text in CSS and fitting background image inside a text shape

【发布时间】：2020-08-22 01:53:06

【问题描述】：

CSS 颜色没有透明输入，它们都是实心的。所以我尝试使用 rgba 为颜色属性设置不透明度，但图像背景没有通过文本显示。有没有办法做到这一点？因此，顶部有一个背景图像和繁重的文字，需要透明，只显示字母轮廓。

我希望得到像示例 dank.sh 那样的结果

【问题讨论】：

你能展示一些你尝试过的代码吗？

这能回答你的问题吗？ How to make a text stroke with transparent text

你能用opacity详细说明你的尝试吗？

@Tecnogirl 不，我不想使用 SVG。

是的，我试过这个***.com/questions/10835500/…

【参考方案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"  >
                 <rect x="0" y="0"   fill="#fff"/>
                 <use xlink:href="#text" />
           </mask>
       </defs>
    <rect x="5" y="5"   mask="url(#mask)"  fill="#fff" fill-opacity="1"/>
 </svg>
 </div>

【讨论】：

我需要将文本框在白色背景中，然后在图像下方，就像在我提供的 dank.sh 链接中一样。

developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode - 它支持 Edge。对于 IE - 抱歉，您将不得不使用简单的 png 图像。我们在那里无能为力。所有现代浏览器都可以正常工作。很高兴为您提供帮助

这个解决方案足够有效，这里有一篇文章w3schools.com/howto/howto_css_cutout_text.asp

为您更新了 SVG 解决方案。但我建议使用 mix-blend-mode: screen;

感谢焦点风格，您的更新 2 对我有用，因为它也适用于 Edge，IE 不再重要。

【参考方案2】：

不透明度是你的朋友：

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

【讨论】：

不透明度使我的整个 div 容器透明我只需要像这样dank.sh 的字母或文本透明。

您需要调整包含文本的元素的不透明度。如果您的容器 div 中直接有文本，只需将文本放在另一个没有背景的 div 中并调整其不透明度

我这样做了，但是白色背景需要像 dank.sh 示例中那样不透明，只有字母需要透明。

dank.sh 示例使用 SVG，这将是最兼容跨浏览器的事情。否则你可以查看-webkit-background-clip 属性，但我不推荐它，因为它没有得到广泛支持。

因此您可以在任何基于矢量的软件中创建文本，并为其导出 SVG 代码

【参考方案3】：

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

opacity 会改变文字的透明度。