使用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小時內與您取得聯系。

整合營銷服務商