如何在HTML / CSS中使用模糊功能

问题描述

我正在尝试模糊网站代码的一部分。这是我正在尝试执行的代码和图像

这是CSS

    #blur {
Box-shadow: 0 10px 20px rgba(0,0.80)
    }

这是代码

     <div>
    <img class="logo" src="logo.jpg" alt="Kusko logo">
    <h1 class="lobsterfont">Kusko Enterprise</h1>
    <h3 class="lobsterfont">Home,Baby and More!</h3>
    <h3 class="aboutbar quicksandfont">Home &nbsp;| &nbsp; About &nbsp;|&nbsp; Contact Us</h3>
</div>

这就是我得到的。它无法在此部分下方显示模糊的功能，而在h1元素上方的某处显示

：

当我尝试测试并发现问题时，请删除徽标和“首页|关于|与我们联系”，效果很好：

     <div>
    <h1 class="lobsterfont">Kusko Enterprise</h1>
    <h3 class="lobsterfont">Home,Baby and More!</h3>
</div>

那我的代码在做什么呢？ 我会很感激

解决方法

如果要使图像或部分模糊，则需要通过CSS添加，在html中添加带有模糊的ID名称将无济于事。

#blur-image,#blur-text {
  filter: blur(8px); // blur effect
}

<img src="https://images.unsplash.com/photo-1593642702909-dec73df255d7?ixlib=rb- 
   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" id="blur-image">
<div id="blur-text">
  <h3>Testing testing </h3>
  <h4>Testing testing </h4>
</div>