溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用CSS創(chuàng)建高級(jí)模糊感的背景圖像

發(fā)布時(shí)間：2021-08-19 11:39:20 來源：億速云 閱讀：112 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“怎么用CSS創(chuàng)建高級(jí)模糊感的背景圖像”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用CSS創(chuàng)建高級(jí)模糊感的背景圖像”吧!

正如標(biāo)題所言我們今天所要介紹的就是通過css來創(chuàng)建一個(gè)模糊的背景圖像，適用于你個(gè)人博客頁(yè)面，也適用于網(wǎng)站背景。

下面我直接上代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .bg-image {
        /* 所使用的圖像 */
        background-image: url("001.jpg");

        /* 添加模糊效果 */
        filter: blur(8px);
        -webkit-filter: blur(8px);

        /* 完整的高度 */
        height: 100%;

        /* 中心和縮放圖像*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 將文本放置在頁(yè)面/圖像的中間 */
    .bg-text {
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0, 0.4); 
        color: white;
        font-weight: bold;
        border: 3px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: center;
    }
</style>

</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
    <h3>歡迎來到</h3>
    <h2 style="font-size:50px">虛擬現(xiàn)實(shí)</h2>
    <p>一切都是虛擬的，但感覺還是真實(shí)</p>
</div>
</body>
</html>

效果如下圖所示：

怎么用CSS創(chuàng)建高級(jí)模糊感的背景圖像

（背景圖來源于網(wǎng)絡(luò)，侵刪歉）

怎么樣！效果是不是很棒！

那么在上述代碼中，給大家介紹幾個(gè)關(guān)鍵的css屬性：

filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。

注： 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標(biāo)準(zhǔn) "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。

transform屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

border簡(jiǎn)寫屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>

border-width：規(guī)定邊框的寬度。
border-style：規(guī)定邊框的樣式。
border-color：規(guī)定邊框的顏色。
inherit：規(guī)定應(yīng)該從父元素繼承 border 屬性的設(shè)置。

background簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有的背景屬性。

background-color：規(guī)定要使用的背景顏色。	
background-position：規(guī)定背景圖像的位置。	
background-size：規(guī)定背景圖片的尺寸。	
background-repeat：規(guī)定如何重復(fù)背景圖像。
background-origin：規(guī)定背景圖片的定位區(qū)域。	
background-clip：規(guī)定背景的繪制區(qū)域。	
background-attachment：規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。	
background-image：規(guī)定要使用的背景圖像。	
inherit：規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。

到此，相信大家對(duì)“怎么用CSS創(chuàng)建高級(jí)模糊感的背景圖像”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手