css怎麼虛化背景圖？ css虛化背景圖片的方法介紹-css教學-PHP中文網

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

不言

發布： 2018-10-26 14:27:46

原創

21463 人瀏覽過

在看到背景圖片虛化的時候，我相信很多朋友都會想到去用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虛化背景圖片的方法介紹