html 磨砂原理,css如何使用磨砂背景

ゝ一世哀愁。 2022-10-05 15:55 40阅读 0赞

简介

这个效果是在看 CSS Secrets 这书上看到的,感觉很不错;

实现原理也挺简单的;

效果图及实现

效果图

![fe8ab21f62b093bd9aa191ac860a5a47.png][]

代码实现

Document

/\*\*

\* 设置背景图全屏覆盖及固定

\* 设置内部元素偏移

\*/

body \{

/\*此处背景图自行替换\*/

background: url(demo.jpg) no-repeat center center fixed;

background-size: cover;

min-height: 100vh;

box-sizing: border-box;

margin: 0;

padding-top: calc(50vh - 6em);

font: 150%/1.6 Baskerville, Palatino, serif;

\}

/\*\*

\* 整体居中功能；

\* 背景透明虚化

\* 溢出隐藏

\* 边缘圆角化

\* 文字增加淡阴影

\*/

.description\{

position: relative;

margin: 0 auto;

padding: 1em;

max-width: 23em;

background: hsla(0,0%,100%,.25) border-box;

overflow: hidden;

border-radius: .3em;

box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,

0 .5em 1em rgba(0, 0, 0, 0.6);

text-shadow: 0 1px 1px hsla(0,0%,100%,.3);

\}

/\*使用滤镜模糊边缘\*/

.description::before\{

content: '';

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

margin: -30px;

z-index: -1;

\-webkit-filter: blur(20px);

filter: blur(20px);

\}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

总结

这种实现模式是考虑了性能来写的,以及维护上的考虑比如使用了 em,可以很轻松的放大缩小整体大小

这里使用了 hsla,这是我第一次使用这个颜色值;以前只在 ps 调整这个,很不错的颜色模式.和 RGBA 大同小异,但是 HSLA 更符合人类眼睛的观看;

还学到了一种新的背景缩写方式/\*分开写\*/

background-color:\#ff0;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

background-size:cover;

/\*简写\*/

background: \#ff0 url(background.gif) no-repeat / fixed cover;

/\*设置background-size必须用单斜杠隔开\*/

[fe8ab21f62b093bd9aa191ac860a5a47.png]: /images/20221005/4c6bd8c8fb834b749833c6430fcab4e3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS磨砂效果

几个样式效果（1）磨砂标签 -------------------- ![在这里插入图片描述][2021011811285479.png] back

墨蓝/ 2023年01月07日 14:30/ 0 赞/ 22 阅读

相关磨人的动态代理

为什么一把年纪的我还在坚持学习？因为贫穷。 ![20200823201339447.png][] 1 代理 Java 中的代理和生活的代理是很相似的，毕竟软件是用来描

待我称王封你为后i/ 2022年11月30日 04:27/ 0 赞/ 54 阅读

相关 Android在Fragment中设置背景磨砂效果bitmapTransform报错（已解决）

原代码： Glide.with(this).load(R.drawable.head) .bitmapTransform(ne

阳光穿透心脏的1/2处/ 2022年11月27日 00:45/ 0 赞/ 15 阅读

相关修改ip地址闪退是什么原因怎么处理_水泥地面起砂怎么处理好水泥地面起砂是什么原因...

![a55962b1aa288ef702360a43004ebf2b.gif][] 我们对房屋装修时，水泥地面起砂是我们常见的问题，一旦出现水泥地面起砂让人非常麻烦、那么。水

「爱情、让人受尽委屈。」/ 2022年10月24日 15:23/ 0 赞/ 41 阅读

相关 html 磨砂原理,css如何使用磨砂背景

简介这个效果是在看 CSS Secrets 这书上看到的,感觉很不错; 实现原理也挺简单的; 效果图及实现效果图 ![fe8ab21f62b093bd9aa191

ゝ一世哀愁。/ 2022年10月05日 15:55/ 0 赞/ 41 阅读

相关 android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效

background-blur是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效jQuery插件。它会抽取图片的主要色彩，并通过SVG过滤器来制作模糊效果。并且它还通过veloc

浅浅的花香味﹌/ 2022年10月05日 04:59/ 0 赞/ 16 阅读

相关人像磨皮美白

我个人一向对磨皮类算法不抱有兴趣，初衷还是美化自然场景，所以看官若是对人像美化感兴趣的，可以看人在旅途的[博客][Link 1]。先前对磨皮印象不过是用一种保边滤波器平滑

爱被打了一巴掌/ 2022年08月04日 00:52/ 0 赞/ 268 阅读

相关如琢如磨...

懵懂的大二慌慌张张的结束了，貌似什么也没学会。php以一个网站的结束终止了学习，其实php后台其实挺简单易懂的，开发web是比较快的。WEB前端学的还行的。大数据中的最最最基础

淡淡的烟草味﹌/ 2022年05月13日 01:40/ 0 赞/ 194 阅读

相关 PS人像修图，通道磨皮、高低频磨皮、滤镜磨皮、人像精修

1、快速简单美肤-----高斯模糊磨皮：原理是高斯模糊+蒙版。这种磨皮方法主要是针对面部的斑点及细纹。操作流程概括：复制背景图层》【滤镜】|【模糊】|【高斯模

浅浅的花香味﹌/ 2021年09月18日 02:00/ 0 赞/ 580 阅读

相关 @程序员，你该如何磨快你的锯子

01、前言作为一名程序员，本职工作当然是编写代码，毫无疑问；就像一名伐木工人，他的本职工作就是锯树；但如果锯子钝了，锯起树来可想而知有多么的吃力。 ![for

亦凉/ 2021年05月11日 20:35/ 0 赞/ 504 阅读