挖掘css背景模糊的三种表现形式（背景整体模糊,背景局部模糊,背景局部清晰）

最新推荐文章于 2024-04-28 23:16:47 发布

codingWeb

最新推荐文章于 2024-04-28 23:16:47 发布

阅读量2.4k

点赞数 1

分类专栏： css 前端 html 文章标签： css 前端 html

本文链接：https://blog.csdn.net/fesfsefgs/article/details/107432586

版权

本文深入探讨了CSS背景模糊的三种实现方式：背景整体模糊，避免了白边问题；背景局部模糊，通过关键代码轻松实现；以及背景局部清晰，依赖于特定CSS属性来达到预期效果。每种方法都配有代码示例和效果图。

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

深挖一下背景模糊效果的三种表现形式：

背景整体模糊
背景局部模糊
背景局部清晰

背景整体模糊：

最近频繁出现一个需求，实现类似于这种效果，背景是商品图模糊后的样子，商品图出现在前面，我第一反应是通过定位position和滤镜filter实现，来看看吧
在这里插入图片描述

先定结构，有坑点：

  <div class="bg">
        <div class="content">我是内容</div>
  </div>

分析：，如果我们把background和filter直接写在bg上，这样写会使整个div的后代模糊并且还会出现白边，导致页面非常不美观，要想解决这个问题，我们可以使用伪元素，因为伪元素的模糊度不会被父元素的子代继承。

白边：

在这里插入图片描述

完整实现：

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
	</head>
	<style>
		html,
		body {
    
			width: 100%;
			height: 100%;
		}
		
		* {
    
			margin: 0;
			padding: 0

最低0.47元/天解锁文章

codingWeb

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
挖掘css背景模糊的三种表现形式（背景整体模糊,背景局部模糊,背景局部清晰）

深挖一下背景模糊效果的三种表现形式：背景整体模糊背景局部模糊背景局部清晰背景整体模糊：最近频繁出现一个需求，实现类似于这种效果，背景是商品图模糊后的样子，商品图出现在前面，我第一反应是通过定位position和滤镜filter实现，来看看吧先定结构，有坑点： <div class="bg"> <div class="content">我是内容</div> </div>分析：，如果我们把background和fi.
复制链接

扫一扫