文字效果集中营

加林森

马黑黑 发表于 2022-3-14 18:14
不客气的

老黑吃晚饭没有？

红影

马黑黑 发表于 2022-3-14 17:27
设置一下颜色，效果会很好的

是啊，十分绚丽呢。

红影

马黑黑 发表于 2022-3-14 17:28
@keyframes能通过改变一切可写属性改变元素及元素对象的外观

这个功能也很强大。

红影

马黑黑 发表于 2022-3-14 17:29
不会吧？我有这功夫吗

是啊，通过你的介绍，才知道文字可以用代码变得这么绚丽呢。

红影

马黑黑 发表于 2022-3-14 17:30
我用的文字只是为了演示。这个，比如广告栏、宣传栏，上下文是没有联系的，所以可以随机

但这首诗的顺序却是需要的呢

马黑黑

红影 发表于 2022-3-14 20:28
但这首诗的顺序却是需要的呢

也不见得。20年前就出现一种散装出版物，你从哪里读都可以

马黑黑

红影 发表于 2022-3-14 20:28
是啊，通过你的介绍，才知道文字可以用代码变得这么绚丽呢。

大家慢慢会知道原理，然后就不觉得奇怪

红影

马黑黑 发表于 2022-3-14 20:54
也不见得。20年前就出现一种散装出版物，你从哪里读都可以

嗯嗯，这样随意出现的也有趣，有着特别的效果呢

红影

马黑黑 发表于 2022-3-14 20:54
大家慢慢会知道原理，然后就不觉得奇怪

现在还不那么懂，所以觉得特别惊奇

马黑黑

红影 发表于 2022-3-14 21:16
嗯嗯，这样随意出现的也有趣，有着特别的效果呢

不过没有流行开来，原因是人们还是需要逻辑

马黑黑

红影 发表于 2022-3-14 21:16
现在还不那么懂，所以觉得特别惊奇

很快就懂得

马黑黑

CSS 文本层 .textC 的背景色设置为background: rgba(255, 255, 255, .3); ，使用了alpha通道达成透明效果，加之 backdrop-filter: blur(5px)的加持，毛玻璃效果凸显。如果底层图片颜色得当、元素丰富，效果会更好。此外，结合底图特点给文本层设置不同的颜色和透明度，效果也将可以十分理想。

如果我们使用 white 或 #fff 方式设置背景颜色，可通过不透明滤镜 opacity 来替代 rgba。opacity的值从 0 开始，最大为1，为0时完全透明，为1时完全不透明。

透明背景会给文本的呈现造成不好的影响，文本的可阅读性较差，为此，需要寻找处理机制，实现思路是给文本添加立体效果。text-shadow在透明背景之上的效果表现，比我们想象的要完美。当然，一切需要整体的配合，综合的因素要充分考虑，考虑的越周全最终效果将会越能令人满意。

马黑黑

毛玻璃文本效果：

<style type="text/css">
/* 底层盒子 */
.diC {
        margin: auto;
        width: 760px;
        background: #000 url('图片地址') no-repeat center/contain; /* linear-gradient(green, tomato, black, olive); */
        position: relative;
}
/* 文本层 */
.textC{
        padding: 20px;
        font-family: '微软雅黑','黑体';
        font-size: 1.2em;
        background: rgba(255, 255, 255, .3);
        color: #aaa;
        text-shadow: 1px 1px 2px #111, 1px 1px 1px #eee;
        backdrop-filter: blur(5px);
}

</style>

<div class="diC">
        <div class="textC">
                文本内容
        </div>
</div>

马黑黑

这个毛玻璃效果利用子元素的透明度设置实现，背景色我们也加入了opacity，达成多层毛玻璃的效果。

父层不透明设置：
opacity: 0.6;

子层用alpha通道设置透明度：
background: rgba(255, 255, 255, .6);

马黑黑

194#参考代码：

<style>
.bgBox {
        margin: auto;
        padding: 20px;
        width: 700px;
        opacity: 0.6;
        background: rgba(0, 0, 0, .5) url('图片url') no-repeat center/cover;
}

.bgBox div {
        padding: 12px;
        font-size: '微软雅黑','黑体';
        font-size: 1.2em;
        background: rgba(255, 255, 255, .6);
        color: #000;
        text-shadow: 1px 1px 2px #111, 1px 1px 1px #666;
        border: 1px solid #ccc;
        border-radius: 10px;
}
</style>

<div class="bgBox">
        <div>内容</div>
</div>

红影

马黑黑 发表于 2022-3-14 21:16
不过没有流行开来，原因是人们还是需要逻辑

习惯的力量还是挺大的。

红影

马黑黑 发表于 2022-3-14 23:29
本帖最后由 马黑黑 于 2022-3-14 23:33 编辑
/* 底层盒子 */
.diC {

这些透明度的综合运用，让文字结合背景的效果好美啊

红影

马黑黑 发表于 2022-3-15 08:09
/*  filter毛玻璃 */
.bgBox {
        margin: auto;

这么多效果展示，黑黑辛苦了

马黑黑

红影 发表于 2022-3-15 10:44
这么多效果展示，黑黑辛苦了

共同辛苦

马黑黑

红影 发表于 2022-3-15 10:30
习惯的力量还是挺大的。

不仅仅是习惯，更多的是逻辑问题