html怎么实现图片虚化

发布网友发布时间：2022-04-28 12:56

共2个回答

懂视网时间：2022-04-28 17:17

在看到背景图片虚化的时候，我相信很多朋友都会想到去用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" height="300">
</body>
</html>

css虚化背景的效果如下：

2345截图20181026140821.png

上述这个方法只是简单的利用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: '';
 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>

背景图片虚化效果如下：

2345截图20181026141812.png

说明：上述代码主要就是将要设置虚化背景的地方通过伪元素设置背景颜色或图片，利用区域relative定位和伪元素absolute定位这样才能让伪元素的大小完全等于本来区域的大小，然后用blur滤镜进行虚化处理，就会想上面的效果那样。

本篇文章到这里就全部结束了，更多精彩的内容大家可以关注Gxlcms的相关教程栏目！！！

热心网友时间：2022-04-28 14:25

html 图片模块模糊

方法/步骤

或者<div class="blur" style="width: 50px;height: 50px;;background-color: red"></div>

.blur {

filter: blur(6px);

-webkit-filter: blur(6px); /* chrome, opera */

-ms-filter: blur(6px);

-moz-filter: blur(6px);

｝

效果图：