马黑黑 发表于 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
我用的文字只是为了演示。这个，比如广告栏、宣传栏，上下文是没有联系的，所以可以随机
但这首诗的顺序却是需要的呢{:4_173:}
红影 发表于 2022-3-14 20:28
但这首诗的顺序却是需要的呢
也不见得。20年前就出现一种散装出版物，你从哪里读都可以
红影 发表于 2022-3-14 20:28
是啊，通过你的介绍，才知道文字可以用代码变得这么绚丽呢。
大家慢慢会知道原理，然后就不觉得奇怪
马黑黑 发表于 2022-3-14 20:54
也不见得。20年前就出现一种散装出版物，你从哪里读都可以
嗯嗯，这样随意出现的也有趣，有着特别的效果呢{:4_187:}
马黑黑 发表于 2022-3-14 20:54
大家慢慢会知道原理，然后就不觉得奇怪
现在还不那么懂，所以觉得特别惊奇{:4_204:}
红影 发表于 2022-3-14 21:16
嗯嗯，这样随意出现的也有趣，有着特别的效果呢
不过没有流行开来，原因是人们还是需要逻辑
红影 发表于 2022-3-14 21:16
现在还不那么懂，所以觉得特别惊奇
很快就懂得
本帖最后由 马黑黑 于 2022-3-14 23:33 编辑 <br /><br /><style type="text/css">
/* 底层盒子 */
.diC {
margin: auto;
width: 760px;
background: #000 url('/data/attachment/forum/202203/14/233246ulnlltdl1dytnk12.jpg') 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">
CSS 文本层 .textC 的背景色设置为background: rgba(255, 255, 255, .3); ，使用了alpha通道达成透明效果，加之 backdrop-filter: blur(5px)的加持，毛玻璃效果凸显。如果底层图片颜色得当、元素丰富，效果会更好。此外，结合底图特点给文本层设置不同的颜色和透明度，效果也将可以十分理想。<br><br>如果我们使用 white 或 #fff 方式设置背景颜色，可通过不透明滤镜 opacity 来替代 rgba。opacity的值从 0 开始，最大为1，为0时完全透明，为1时完全不透明。<br><br>透明背景会给文本的呈现造成不好的影响，文本的可阅读性较差，为此，需要寻找处理机制，实现思路是给文本添加立体效果。text-shadow在透明背景之上的效果表现，比我们想象的要完美。当然，一切需要整体的配合，综合的因素要充分考虑，考虑的越周全最终效果将会越能令人满意。
</div>
</div>
毛玻璃文本效果：
<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>
<style>
/*filter毛玻璃 */
.bgBox {
margin: auto;
padding: 20px;
width: 700px;
opacity: 0.6;
background: rgba(0, 0, 0, .5) url('/data/attachment/forum/202203/15/080820okngzrvvukgyy6ll.jpg') 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>
这个毛玻璃效果利用子元素的透明度设置实现，背景色我们也加入了opacity，达成多层毛玻璃的效果。<br><br>
父层不透明设置：<br>
opacity: 0.6;<br><br>
子层用alpha通道设置透明度：<br>
background: rgba(255, 255, 255, .6);
</div>
</div>
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 {
这些透明度的综合运用，让文字结合背景的效果好美啊{:4_199:}
马黑黑 发表于 2022-3-15 08:09
/*filter毛玻璃 */
.bgBox {
margin: auto;
这么多效果展示，黑黑辛苦了{:4_187:}
红影 发表于 2022-3-15 10:44
这么多效果展示，黑黑辛苦了
共同辛苦
红影 发表于 2022-3-15 10:30
习惯的力量还是挺大的。
不仅仅是习惯，更多的是逻辑问题