如何通过CSS在文本后面添加突出显示，使其看起来像下面的Instagram？ [英] How do I add a highlight behind the text via CSS so it looks like Instagram-one below?

问题描述

我是CSS\HTML的新手。如何通过CSS执行相同的操作：

I'm quiet new to CSS\HTML. How do I do the same way via CSS:

我已经尝试过：

.works_title {
  display: inline;
  padding: 3px;
  font-size: 28px;
  font-weight: 700;
  color: aliceblue;
  background-color: #000;
  border-radius: 4px;
}


body {
 max-width:300px;
}

<div class="works_title">Something long, like a title with bunch of letters</div>

但它看起来并不像Instagram故事编辑器中的样子。我在网络上需要这样的东西。谢谢！

But it doesn't look the way how it possibly could be like in an Instagram story editor. I need something like this in a web. Thanks!

推荐答案

您可以使用 box-decoration-break：clone; 然后考虑使用SVG滤镜以使效果更好。

You can use box-decoration-break: clone; then consider an SVG filter to make the effect better.

更新 stdDeviation 变量以控制形状：

.works_title {
  display: inline;
  padding: 4px 6px;
  line-height:1.4; /* adjust this to avoid overlapping the padding */
  font-size: 28px;
  font-weight: 700;
  color: aliceblue;
  background-color: red;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  filter: url('#instagram');
}
.no-filter {
  filter:none;
}

body {
  max-width: 250px;
}

<div class="works_title">Something longlike a title with bunchofletters a more text</div>
<br>
<br>
<div class="works_title no-filter">Something longlike a title with bunchofletters a more text</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="instagram">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

这篇关于如何通过CSS在文本后面添加突出显示，使其看起来像下面的Instagram？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！