搜尋

首頁 >web前端 >css教學 >css怎麼虛化背景圖？ css虛化背景圖片的方法介紹

css怎麼虛化背景圖？ css虛化背景圖片的方法介紹

不言
不言原創
2018-10-26 14:27:4621488瀏覽

在看到背景圖片虛化的時候，我相信很多朋友都會想到去用ps去實現這個效果，那麼用css能實現背景圖片的虛化效果嗎？接下來的這篇文章就來跟大家介紹一下css設定背景圖片虛化的方法。

在虛化背景時使用的是filter屬性，我們就是利用filter屬性中blur來設定虛化背景的。

程式碼如下：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300"    style="max-width:90%">
</body>
</html>

css虛化背景的效果如下：

css怎麼虛化背景圖？ css虛化背景圖片的方法介紹

##上述這個方法只是簡單的利用css將背景圖片虛化，下面我們來看看稍微複雜一點的方法，當然也是利用filter屬性

#程式碼如下：

<!DOCTYPE html>
<html>
<head>
<style>
  .mbl {
    width: 20em;
    height: 20em;
    background: url(image/girl.jpg);
    background-size: cover;
    overflow: hidden;
    margin: 30px;
}
.text {
    width: 18em;
    height: 18em;
    margin: 1em;
    background: hsla(0, 0%, 100%, .4);
    color: black;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.text::before {
    position: absolute;
    background: url(image/girl.jpg);
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: &#39;&#39;;
    filter: blur(4px);
    /*    background: rgba(225, 0, 0, 0.5);*/
}
.text p {
   height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
</style>
</head>
<body>
<div class="mbl">
        <div class="text">
          <p>图片上面的文字内容</p>
        </div>
    </div>
</body>
</html>

背景圖片虛化效果如下：

css怎麼虛化背景圖？ css虛化背景圖片的方法介紹

說明：上述程式碼主要就是將要設定虛化背景的地方透過偽元素設定背景顏色或圖片，利用區域relative定位和偽元素absolute定位這樣才能讓偽元素的大小完全等於原本區域的大小，然後用blur濾鏡進行虛化處理，就會想上面的效果那樣。

這篇文章到這裡就全部結束了，更多精彩的內容大家可以追蹤php中文網的相關教學欄位！ ！ ！

以上是css怎麼虛化背景圖？ css虛化背景圖片的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS如何設定捲軸樣式？ CSS設定捲軸樣式方法下一篇：CSS如何設定捲軸樣式？ CSS設定捲軸樣式方法

相關文章

看更多