【CSS】背景模糊,不模糊主体文字

问题

  • 背景模糊,不模糊文本

效果图

t1

t2

t3



实现思路

  1. 自定义css变量存储图片地址,方便后期更改
  2. 使用伪元素实现背景模糊达到不遮挡主体文本
  3. transform: scale(1.5)吧图片放大1.5倍,避免设置背景模糊出现白边。
  4. overflow: hidden 超出隐藏,避免背景放大出现白边、撑出滚动条。
  5. background-position: 50%背景中间为起始位置
  6. background-size: cover取背景中间
  7. 使用 filter: blur(20px) brightness(50%)模糊背景+降低背景亮度
    • blur(20px) 模糊20px
    • brightness(50%) 亮度降低50% ,如果不降低亮度,会导致太亮而影响主体文字,如下图
  8. 降低亮度效果图

代码实现

html 复制代码
<div class="music-box" style="width: 300px; height: 600px"></div>
 <style>
:root {
  /* 自定义变量 */
  --music-bg: url("/testImg/photo0000-1246.jpg");
}

.music-box {
  position: relative;
}

.music-box::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  filter: blur(20px) brightness(50%);
  background-size: cover;
  /* 使用自定义变量 --music-bg*/
  background-image: var(--music-bg);
  background-position: 50%;
  transform: scale(1.5);
}
</style>

更改图片地址

js 复制代码
document.body.style.setProperty('--music-bg', `url(/myimg.jpeg)`)
相关推荐
dy171723 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5