css怎么虚化背景图片？css虚化背景图片的方法介绍
在看到背景图片虚化的时候，我相信很多朋友都会想到去用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虚化背景的效果如下：
上述这个方法只是简单的利用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>背景图片虚化效果如下：
说明：上述代码主要就是将要设置虚化背景的地方通过伪元素设置背景颜色或图片，利用区域relative定位和伪元素absolute定位这样才能让伪元素的大小完全等于本来区域的大小，然后用blur滤镜进行虚化处理，就会想上面的效果那样。
本篇文章到这里就全部结束了，更多精彩的内容大家可以关注php中文网的相关教程栏目！！！
以上是css怎么虚化背景图片？css虚化背景图片的方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Win11如何自定义背景图片
Jun 30, 2023 pm 08:45 PM
Win11如何自定义背景图片？在最新发布的win11系统中，里面有许多的自定义功能，但是很多小伙伴不知道应该如何使用这些功能。就有小伙伴觉得背景图片比较单调，想要自定义背景图，但是不知道如何操作自定义背景图，如果你不知道如何定义背景图片，小编下面整理了Win11自定义背景图片步骤，感兴趣的话一起往下看看把！Win11自定义背景图片步骤1、点击桌面win按钮，在弹出的菜单中点击设置,如图所示。2、进入设置菜单，点击个性化,如图所示。3、进入个性化，点击背景,如图所示。4、进入背景设置，点击浏览图片
如何在win10个性化设置中删除背景图片
Dec 21, 2023 pm 02:31 PM
Win10系统每次使用过的桌面背景都会在设置中的个性化背景图片里面显示，有些用户想删除，但是不知道怎么操作，这篇文章是本站给大家分享的Win10个性化背景图片删除方法。查看使用过的桌面背景图片：1、桌面空白处点击【右键】，在打开的菜单项中，选择【个性化】；2、在背景中的选择图片中，可以查看到您使用过的桌面背景图片；删除使用过的桌面背景图片：注意：本操作涉及到修改注册表，修改注册表有风险，请提前备份数据1、同时按下【Win+R】组合键，打开运行窗口，输入【regedit】命令，然后点击【确定】；2
抖音直播伴侣怎样添加背景图片-抖音直播伴侣添加背景图片的方法
Mar 05, 2024 am 09:16 AM
很多在抖音做直播的用户都会使用抖音直播伴侣软件，不过你们知道抖音直播伴侣怎样添加背景图片吗?下文就是小编为你们带来的抖音直播伴侣添加背景图片的方法，感兴趣的用户快来下文看看吧。首先登录电脑上的抖音直播伴侣，然后进入主页。在左边，我们选择[添加材料]在[场景1]下面。接着，页面上会有一个添加材料的窗口，我们可以直接选择[图片]功能点击进入。然后，我们会打开一个当地存放图片材料的窗口。我们需要选择我们想要添加的图片材料，然后点击右下角的打开按钮添加它们。添加图片后，我们需要用鼠标左键将图片拉到合适的
ppt背景图片怎么统一替换
Mar 25, 2024 pm 04:16 PM
PPT 背景图片的统一替换是提升演示文稿视觉风格的重要操作，可通过两种主要方法实现：幻灯片母版替换和批量替换。幻灯片母版替换涉及在母版中删除原有图片并插入新图片，从而应用于所有幻灯片。批量替换功能则直接替换演示文稿中所有幻灯片的背景图片。统一背景图片不仅美化演示文稿，还增强观众专注力。选择与主题相符且质量高的图片至关重要，并应注意调整透明度、大小等细节。此外，PPT 还提供丰富的背景设置选项，如渐变、纹理和图案，可根据需求自定义调整。
WPS Office 2016中背景图片的设置方法介绍
Mar 29, 2024 pm 10:21 PM
1、启动WPS演示，如图。2、点击【+】按钮，新建幻灯片，如图。3、点击右键，选择【背景】，如图。4、在【对象属性】页的填充选项中，选择【图片或纹理填充】，如图。5、在图片来源中，点击】本地文件【，如图。6、在对话框中，选择想要插入的图片，并点击】打开【按钮，如图的例子。7、这样就完成WPS演示的背景图片设置了。如图的效果。
ppt背景图片怎么设置
Mar 25, 2024 pm 04:12 PM
设置PPT背景图片可以为演示文稿增添视觉效果和吸引力。本教程详细介绍了如何选择合适的图片、设置背景图片以及调整其与演示内容的协调性。通过遵循本指南，你可以轻松地为PPT创建出令人印象深刻的背景图片，提升演示文稿的整体效果。
唧唧Down如何更换背景图片？唧唧Down更换背景图片的方法
Mar 04, 2024 pm 03:30 PM
想必在座的用户对唧唧Down软件都不陌生，但是你们知道唧唧Down如何更换背景图片吗?本章节为你们带来的文章就是唧唧Down更换背景图片的方法，感兴趣的伙伴们快一同来下文看看吧。点击电脑桌面上的“唧唧Down”图标，打开软件。进入唧唧Down主界面，点击设置。在设置中，将进度条拉到最下方。(如下图)在高级功能下方，点击自定义背景图。在电脑文件中找到喜欢的背景图，点击打开即可。
ppt背景图片怎么设置全部应用
Jan 07, 2021 pm 04:58 PM
设置方法：1、打开制作好的需要编辑的PPT文件；2、点击“对象属性”按钮，打开“对象属性”菜单，将“填充”设置为“图片或纹理填充”，之后点击“请选择图片”，选择“本地上传”；3、选择背景图片，点击“打开”按钮；4、点击“全部应用”按钮即可。
