使用CSS实现图片的磨砂玻璃效果

在前面

偶然看到，这里整理笔记
博文涉及内容：使用CSS实现图片的磨砂玻璃效果Demo相关属性的简单文档说明
理解不足小伙伴帮忙指正

「傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了。当时我是个年轻人，但我害怕这样生活下去，衰老下去。在我看来，这是比死亡更可怕的事。--------王小波」

这里的磨砂玻璃效果主要使用 CSS的滤镜效果实现，滤镜效果是 CSS 的一个模块，它定义了一种HTML元素显示在文档顶层，处理其渲染的方式。主要涉及 backdrop-filter,filter 这两个 CSS属性。

效果图

原理

样式一

        /* Frosted glass CSS */
        .frosted_1 {
            /* Frosted glass affect */
            -webkit-backdrop-filter: blur(5px); 
            backdrop-filter: blur(5px); 
        }

第一种单纯利用 backdrop-filter CSS 属性实现

backdrop-filter CSS 属性: 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。这里一个加了 -webkit,只是考虑兼容性问题。如果不考虑，一个就可以了。

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px); 
/* 模糊 */
backdrop-filter: brightness(60%); 
/* 亮度 */
backdrop-filter: contrast(40%); 
/* 对比度 */
backdrop-filter: drop-shadow(4px 4px 10px blue); 
/* 投影 */
backdrop-filter: grayscale(30%); 
/* 灰度 */
backdrop-filter: hue-rotate(120deg);
/* 色调变化 */
backdrop-filter: invert(70%); 
/* 反相 */
backdrop-filter: opacity(20%); 
/* 透明度 */
backdrop-filter: sepia(90%); 
/* 褐色 */
backdrop-filter: saturate(80%); 
/* 饱和度 */

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

对应 CSS 规范：https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty

样式二

        .frosted_2 {
            /* Frosted glass affect */
            -webkit-backdrop-filter: blur(5px);  
            backdrop-filter: blur(5px); 
        
            /* Add box-shadow for more darker */
            box-shadow: 0px 10px 15px 10px rgba(0 ,0 ,0 ,0.15);
            background-color: rgba(228 ,228 ,228 ,0.10);
        }

第二种在第一种的基础上利用 box-shadow 加了外阴影，因为背景是深色的，所以不是特别明显。同时使用 background-color加了一个接近透明的背景色，看上去整个偏亮一点。

关于 box-shadow 用的还是蛮多的，这么不多说明。

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

样式三

        .frosted_3 {
            filter: drop-shadow(2px 4px 6px black);
            background-color: rgba(152, 151, 151, 0.2); 
            box-shadow: inset 0 0 0 200px rgb(255, 255, 255, 0.08);
        }

第三种没有使用 backdrop-filter，使用了 filter 加了一个投影的效果 drop-shadow ,同时利用 box-shadow 生成内阴影，一个偏量的接近透明的颜色，然后使用 background-color 加深了背景效果。

这里的 filter 和最上面的 backdrop-filter 基本类似，包括渲染函数基本相同，filter CSS属性将图形效果（如模糊或移色）应用于一个元素。过滤器通常用于调整图像、背景和边框的渲染。

对应 CSS 规范：https://drafts.fxtf.org/filter-effects/#FilterProperty

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .container {
            height: 100vh;
            width: 100vw;
            background-image: url("./2.png");
            background-size: cover;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .glass {
            width: 30%;
            height: 20%;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            text-shadow: 2px 2px 2px rgba(0, 27, 77, 0.521);
            padding: 1%;
            text-align: center;
        }
        @media only screen and (max-width: 786px) {
            .glass {
                font-size: 1.2rem;
            }
        }
        /* Frosted glass CSS */
        .frosted_1 {
            /* Frosted glass affect */
            -webkit-backdrop-filter: blur(5px); 
            backdrop-filter: blur(5px); 
        }
        .frosted_2 {
            /* Frosted glass affect */
            -webkit-backdrop-filter: blur(5px);  
            backdrop-filter: blur(5px); 
        
            /* Add box-shadow for more darker */
            box-shadow: 0px 10px 15px 10px rgba(0 ,0 ,0 ,0.15);
            background-color: rgba(228 ,228 ,228 ,0.10);
        }
        .frosted_3 {
            filter: drop-shadow(2px 4px 6px black);
            background-color: rgba(152, 151, 151, 0.2); 
            box-shadow: inset 0 0 0 200px rgb(255, 255, 255, 0.08);
        }
        </style>
    <title>磨砂玻璃效果Demo</title>
</head>
<body>
    <div class="container">
        <div class="glass frosted_1">
            <h1>這裏裝得可愛一點。</h1>
        </div>
        <div class="glass frosted_2">
            <h1>這裏裝得可愛一點。</h1>
        </div>
        <div class="glass frosted_3">
            <h1>這裏裝得可愛一點。</h1>
        </div>
    </div>
</body>

</html>

关于 CSS设置磨砂玻璃就和小伙伴们分享到这里，生活加油 ^_^

博文参考

https://silentlad.com/frosted-glass-effect-using-css

https://developer.mozilla.org/en-US/search?q=-webkit-backdrop-filter

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片，语法如下：

<img src="图片路径" alt="替换文本" />

具体示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>

效果如下：

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码，在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。

图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频

我们在开发网站时，一般会在图片上加一个过光效果，目的是为了，让用户明白我的鼠标移动到这里了，同时还能增加网页上的美观效果。下面是它的实现基础代码，大家可以看看了解了解。

html部分

<div class="box">
<div class="light">
</div>
</div>

创建一个box,包裹一个light

css部分

*{
padding: 0;
margin: 0;
}
html{
display: flex;
justify-content: center;
}
.box{
position: relative;
margin-top: 30px;
width: 300px;
height: 200px;
background-color: green;
overflow: hidden;
}
.light{
content: '';
display: block;
position: absolute;
top: -20%;
left: -100%;
width: 350px;
height: 100px;
transform: rotate(-45deg);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
/* 过度实现部分 */
/* transition: 0.8s; */
}
.box:hover .light{
/* 过度实现部分 */
/* transform: translate(200%,200%) rotate(-45deg); */
animation: cross 0.5s;
}
@keyframes cross{
from{
}
to{
top: 80%;
left: 100%;
transform: rotate(-45deg);v
}
}

想要通过过度效果实现的同学，将动画效果注释掉，释放过度部分的注释就可以了。

实现原理

将ligth盒子设置为宽350px,高100px的长方形，通过添加渐变实现光影效果，再将其逆时针旋转45度定位于box盒子的左上方，然后通过“动画”或者“过度”效果使其向右下方移动。（动画效果在鼠标离开box的时候，会有一个光影返回去的效果。）

在线咨询

上一篇：<AppML> 案例研究-HTML 模板
下一篇：DW如何新建HTML网页

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商