4px

4px

关注
发信
使用simd查找字符的第一个实例
基于其值的数组中的 Numpy sum 元素
avconv-concat .mp4，没有质量损失和巨大的文件大小
ARM是否支持64位浮点数的SIMD操作?
实体框架导航属性错误
如何在CALayer上获得触摸事件？
如何测试地理位置是否已在“现实世界”中访问过？
生成.ADO.net实体数据模型时，PostgreSQL不会出现在数据源中
您如何使用 T-SQL 全文搜索获得像 Google 一样的结果?
java中的x++和++x有区别吗?
Azure 数据工厂将 2 列映射到一列
如何首先使用代码在 Entity Framework 6.2 中创建索引
HTML中的valign与text-align
SQL 列中的 XML:无法调用 nvarchar(max) 上的方法
是否有将多行聚合为一行的 Oracle SQL 查询?

向文本块添加逐渐增加的模糊

扫码查看
本文介绍了向文本块添加逐渐增加的模糊的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这样的文字:

blur-gradient"><p>Lorem ipsum dolor sat amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Aenean et totortor at risus viverra adipiscing at in. Cursus vitae congue mauris rhoncus aenean vel.Tristique nulla aliquet enim Tortor at auctor urna nunc id.Nisl tincidunt eget nullam non.Purus 坐 amet luctus venenatis lectus magna fringilla.Velit scelerisque in dictum non consectetur a erat nam.Vel pretium lectus quam id leo in. Tristique nulla aliquet enim tortor at aucor.In vitae turpis massa sed elementum.Erat imperdiet sed euismod nisi porta lorem mollis.Mattis enim uttellus elementum sagittis.Convallistellus id interdum velit laoreet id.Urna 调味品 mattis pellentesque id nibh Tortor id.Vitae congue mauris rhoncus aenean vel.Aliquet porttitor lacus luctus accumsan Tortor posuere ac ut.Nulla porttitor massa id neque aliquam 前庭morbi.调味品 mattis pellentesque id nibh Tortor id.</p><p>Volutpat lacus laoreet non curabitur gravida arcu ac.Id aliquet lectus proin nibh nisl 调味品 ID.Sapien faucibus et molestie ac feugiat sed lectus.Facilisis magna etiam tempor orci eu lobortis elementum nibh.Dui vivamus arcu felis bibendum.Interdum posuere lorem ipsum dolor 坐 amet consectetur adipiscing elit.Odio pellentesque diam volutpat commodo sed egestas egestas.Adipiscing diam donec adipiscing tristique risus nec feugiat in. Risus nullam eget felis eget nunc lobortis.Accumsan 坐 amet nulla facilisi morbi.Elit eget gravida cum sociis natoque penatibus et magnis.Morbi tempus iaculis urna id volutpat lacus laoreet.在nibh mauris cursus mattis molestie a iaculis at erat.Fermentum dui faucibus 在 ornare quam.Duis attellus at urna condimentum mattis pellentesque id.Est ullamcorper eget nulla facilisi.Sed arcu non odio euismod lacinia.Orci ac auctor augue mauris augue neque gravida infermentum.</p>

我希望文本以 filter: blur(0px) 开头，以 filter: blur(4px) 结尾.

这可以用 css 实现吗?如果是这样，你建议我怎么做?

解决方案

生成两个元素 :before 和 :after.他们从属性 data-text

获取文本

这个想法是让两个元素具有相反的透明度.作为一，设置了一个模糊值.

这个解决方案没有内容中重复文本的搜索引擎优化问题！

示例:

.myText {位置:相对；z-索引:0；填充底部:20px；}.myText:之前{内容:属性(数据文本)；位置:相对；背景:线性梯度(向右，rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)；-webkit-mask-image: 线性梯度(向左，rgba(255, 255, 255, 0) 0%，rgba(255, 255, 255, 1) 100%)；-webkit-background-clip:文本；-webkit-text-fill-color:透明；z-索引:1；}.myText:在{之后内容:属性(数据文本)；位置:绝对；顶部:0；右:0；左:0；底部:0；-webkit-mask-image: 线性梯度(到顶部，rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)；-webkit-background-clip:文本；-webkit-过滤器:模糊(4px)；z-索引:-1；}.myText 跨度 {位置:绝对；顶部:0；右:0；左:0；底部:0；颜色:RGBA(0,0,0,0)；z-索引:2；}
<div class="myText" data-text="Lorem ipsum dolor sat amet consectetur adipisicing elit. Iure qui,earum tenetur facilis quodvero, porro, sequi consequunturinventre id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sat, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, rationeArchitecto rem dolores cumque officiis perferendis saepe vitae Provident mollitia sed！Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Perferendis libero, dolor officiis vero aspernatur itaque?在 obcaecati nobis reprehenderit dolorem autem deserunt.理性，reiciendis adipisci.sed consectetur ipsa tempora！Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.Iure qui、earum tenetur facilis quod vero、porro、sequi consequunturinventre id atque modi fugiat soluta iste?Eveniet omnis animi mollitia doloribus?Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Odio tenetur et vero placeat eaque harum minus velit, 理性建筑 rem dolores cumque officiis perferendis saepe vitae Provident mollitia sed！Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Perferendis libero, dolor officiis vero aspernatur itaque?在 obcaecati nobis reprehenderit dolorem autem deserunt.理性，reiciendis adipisci.sed consectetur ipsa tempora！"><跨度>Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.Iure qui、earum tenetur facilis quod vero、porro、sequi consequunturinventre id atque modi fugiat soluta iste?Eveniet omnis animi mollitia doloribus?Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Odio tenetur et vero placeat eaque harum minus velit, 理性建筑 rem dolores cumque officiis perferendis saepe vitae Provident mollitia sed！Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Perferendis libero, dolor officiis vero aspernatur itaque?在 obcaecati nobis reprehenderit dolorem autem deserunt.理性，reiciendis adipisci.sed consectetur ipsa tempora！Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.Iure qui、earum tenetur facilis quod vero、porro、sequi consequunturinventre id atque modi fugiat soluta iste?Eveniet omnis animi mollitia doloribus?Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Odio tenetur et vero placeat eaque harum minus velit, 理性建筑 rem dolores cumque officiis perferendis saepe vitae Provident mollitia sed！Lorem ipsum dolor 坐，amet consectetur adipisicing 精英.Perferendis libero, dolor officiis vero aspernatur itaque?在 obcaecati nobis reprehenderit dolorem autem deserunt.理性，reiciendis adipisci.sed consectetur ipsa tempora！</span>

I have this text:

<div class"blur-gradient">
 <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at risus viverra adipiscing at in. Cursus vitae congue mauris rhoncus aenean vel. Tristique nulla aliquet enim tortor at auctor urna nunc id. Nisl tincidunt eget nullam non. Purus sit amet luctus venenatis lectus magna fringilla. Velit scelerisque in dictum non consectetur a erat nam. Vel pretium lectus quam id leo in. Tristique nulla aliquet enim tortor at auctor. In vitae turpis massa sed elementum. Erat imperdiet sed euismod nisi porta lorem mollis. Mattis enim ut tellus elementum sagittis. Convallis tellus id interdum velit laoreet id. Urna condimentum mattis pellentesque id nibh tortor id. Vitae congue mauris rhoncus aenean vel. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Nulla porttitor massa id neque aliquam vestibulum morbi. Condimentum mattis pellentesque id nibh tortor id.
 </p>
 <p>
    Volutpat lacus laoreet non curabitur gravida arcu ac. Id aliquet lectus proin nibh nisl condimentum id. Sapien faucibus et molestie ac feugiat sed lectus. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Dui vivamus arcu felis bibendum. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Risus nullam eget felis eget nunc lobortis. Accumsan sit amet nulla facilisi morbi. Elit eget gravida cum sociis natoque penatibus et magnis. Morbi tempus iaculis urna id volutpat lacus laoreet. In nibh mauris cursus mattis molestie a iaculis at erat. Fermentum dui faucibus in ornare quam. Duis at tellus at urna condimentum mattis pellentesque id. Est ullamcorper eget nulla facilisi. Sed arcu non odio euismod lacinia. Orci ac auctor augue mauris augue neque gravida in fermentum.
 </p>
 </div>

I want the text to start out with filter: blur(0px) and end up with filter: blur(4px).

Is this possible with css? If so, how do you recommend I go about it?

解决方案

Generates two elements :before and :after. They get text from attribute data-text

The idea is for the two elements to have opposite transparency. As one, a blur value is set.

This solution not have a SEO problem for duplicate text in content!

Example:

.myText {
    position: relative;
    z-index: 0;
    padding-bottom: 20px;
}

.myText:before {
    content: attr(data-text);
    position: relative;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
}

.myText:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    -webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-filter: blur(4px);
    z-index: -1;
}

.myText span {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: rgba(0,0,0,0);
    z-index: 2;
}
<div class="myText" data-text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste
architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora!">
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure qui, earum tenetur facilis quod vero, porro, sequi consequuntur inventore id atque modi fugiat soluta iste? Eveniet omnis animi mollitia doloribus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio tenetur et vero placeat eaque harum minus velit, ratione iste architecto rem dolores cumque officiis perferendis saepe vitae provident mollitia sed! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis libero, dolor officiis vero aspernatur itaque? In obcaecati nobis reprehenderit dolorem autem deserunt. Ratione, reiciendis adipisci. Sed consectetur ipsa tempora!
    </span>
</div>

这篇关于向文本块添加逐渐增加的模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-30 05:57
查看更多
Powered by LMLPHP ©2025 4px 0.054075