CSS如何给背景图片添加一个滤镜和模糊---css3新特性

最新推荐文章于 2024-05-09 15:49:41 发布

森屿海港-

最新推荐文章于 2024-05-09 15:49:41 发布

阅读量4.5k

点赞数 1

分类专栏： css常见为题文章标签： css3

本文链接：https://blog.csdn.net/weixin_45163951/article/details/118932600

版权

本文介绍了如何使用CSS3给背景图片添加滤镜和模糊效果。通过创建一个覆盖在背景图片上的定位盒子，并调整z-index，可以实现滤镜效果不覆盖内容。同时，应用`filter: blur(10px)`属性可以为背景图片添加模糊效果。

摘要由CSDN通过智能技术生成

首先我们给一个背景图片添加一个滤镜

我们可以在设有背景图片的容器内增加一个盒子bg,然后通过定位的方法将其覆盖在盒子上，直接设置背景的透明度就行了，这个没有问题

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模糊</title>
		<style type="text/css">
			.warp{
				position: relative;
				width: 600px;
				height: 600px;
				/* z-index: -1; */
				background-color: rgba(0,0,0,.5);
			}
			.bg{
				width: 100%;
				height: 100%;
				position:absolute;
				top: 0;
				left: 0;
                background-image: url(../image/banner2.jpg);

			    z-index: -1; 
				filter: blur(10px);
			}
		
		</style>
	</head>
	<body>
		<div class="warp">
		
			<div class="bg"></div>
		</div>
	</body>
</html>

效果图如下：

最低0.47元/天解锁文章

森屿海港-

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS如何给背景图片添加一个滤镜和模糊---css3新特性

首先我们给一个背景图片添加一个滤镜我们可以在设有背景图片的容器内增加一个盒子bg,然后通过定位的方法将其覆盖在盒子上，直接设置背景的透明度就行了，这个没有问题代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>模糊</title> <style type="text/css"> .warp{ position
复制链接

扫一扫

专栏目录