8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 如何通过 CSS 在文本后面添加高亮以使其看起来像下面的 Instagram-one？

如何通过 CSS 在文本后面添加高亮以使其看起来像下面的 Instagram-one？

Pablo Campana 1月前
10 0

我对 CSS\HTML 还很陌生。如何通过 CSS 实现相同的效果：我试过这个：.works_title { display: inline; padding: 3px; font-size: 28px; font-weight: 700; color: aliceblue;

我对 CSS\HTML 还不太熟悉。如何通过 CSS 实现相同的效果：

Instagram highlight

我尝试过这个： 

.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 故事编辑器中那样。我需要网络上类似的东西。谢谢！

帖子版权声明 1、本帖标题：如何通过 CSS 在文本后面添加高亮以使其看起来像下面的 Instagram-one？
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Pablo Campana在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    您可以 box-decoration-break: clone; 考虑使用 SVG 过滤器来获得更好的效果。

    更新 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 highlight text instagram style

  • 引用 3楼

    太棒了！它起作用了，只是 background: rgba(255, 0, 0, 0.8) 的不透明度 0.8 不再像往常一样起作用。您必须大幅降低不透明度才能看到一些效果，在这种情况下，效果完全不同。您知道@TemaniAfif 如何让您的 SVG 滤镜 + 正常背景颜色不透明度行为吗？

  • 引用 4楼

    当我们使用 rgba(r, g, b, alpha) 降低背景不透明度时，会发生这种情况：i.sstatic.net/Wm4PZ.png。注意：我不能使用 opacity: ...，因为这也会降低文本的不透明度，而这并不是我想要的。

  • 引用 5楼

    有没有办法通过添加带有 rgb(255, 0, 0, 0.75) 的容器 div 或类似这样的技巧来实现半透明背景？我尝试了几种方法，但都没有奏效（目前）。复杂之处在于拥有半透明背景 + 不透明的纯白色文本。@TemaniAfif 对此有什么想法吗？

  • 引用 6楼

    您可以使用 after 和 before 伪元素。

    首先我们的盒子 position:relative 和伪元素需要有 position:absolute

    我创建一个圆，并使其与边界相切 ::after

    enter image description here

    然后我创建另一个正方形并将其放入具有较低位置的角落 z-index ，并且 overflow:hidden

    z-index 在这里很重要，因为当我们将圆的背景颜色设置为主体颜色（这里是白色）时，圆将消失，剩下的唯一东西是 ::before 似乎具有反边框半径的元素

    enter image description here 

    *,
*::before,
*::after {
  box-sizing: border-box;
}


.tittle-font {
  position: relative;
  font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
  line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
  font-weight: 300;
  background-color: #fff500;
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
}

.box-1{
  
  border-top-left-radius:1rem ;
  border-top-right-radius: 1rem;
}
.box-2{
  border-top-right-radius: 1rem;
}

.box-3{
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.box-1::after{
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: white;
  z-index:5;
  right: -2rem;
  bottom:0rem;
  border-radius: 100%;
}

.box-1::before{
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #fff500;
  z-index:4;
  right: -1rem;
  bottom:0rem;
  overflow: hidden;
}

.box-2::after{
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: white;
  z-index:5;
  right: -2rem;
  bottom:0rem;
  border-radius: 100%;
}

.box-2::before{
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #fff500;
  z-index:4;
  right: -1rem;
  bottom:0rem;
  overflow: hidden;
}
     <div>
      <div class="tittle-font pt-4 box-1 rounded-t-xl">SOFTWARE</div>
      <br />
      <div class="tittle-font rounded-tr-xl box-2">DEVELOPMENT</div>
      <br />
      <div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl box-3">
        AND CONSULTING
      </div>
</div>
返回
作者最近主题：