我只想模糊图像，但它会影响一切

Question

我想创建一个 background image blur 我应用了它，但一切都变得模糊了所以这里是 html，这是对整个项目的快速重新创建，如果你没听懂class names跟我聊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
 <div class="trbp"><button class="trb">sign up</button></div>
 <div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
  <script src="main.js"></script>
</body>
</html>

这是css的帮助

    font-size: 15pt;
    width: 500px;
    height: 500px;
    background-image: url("bto.jpg");
    filter: blur(8px)
}
.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}

.btp{
  position: relative;
  top: 120px;
  left: 30px;
}
.bth{
  position: relative;
  top: 100px;
  left: 30px;
}
.blb{
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

Answer 1

或者您可以将其应用于全尺寸容器，如下所示，将容器大小和位置设置为绝对值，然后将其余内容设置为相对值并设置 z-indexes。

body, html{
width: 100%;
height: 100%; 
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
  background-image:url('https://placeimg.com/1000/1000/people'); 
  width:100%; height:100%;
  -webkit-filter: blur(5px);z-index:0;
  position:absolute;
  background-position: center;
  background-size:cover;
  z-index:-10;
 }
 
.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}

.btp{
  position: relative;
  top: 120px;
  left: 30px;
}
.bth{
  position: relative;
  top: 100px;
  left: 30px;
}
.blb{
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

<div class="bgImageContainer">
</div>

<div class="trbp"><button class="trb">sign up</button></div>
 <div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>

不能直接在正文中使用模糊滤镜。但是您可以将背景图像和滤镜应用于主体上的伪元素。您可以使用以下代码在背景中添加模糊效果。

body {
    margin:0;
    padding:0;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
    background-size: cover;
    height:100%;
    z-index: -1000; /* Keep the background behind the all your content */  height: 20%; width: 20%; 

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(1px);
}


.trbp{
  width: 500px;
  height: 40px;
  border: black;
}
.trb{
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
}

.btp{
  position: relative;
  top: 120px;
  left: 30px;
}
.bth{
  position: relative;
  top: 100px;
  left: 30px;
}
.blb{
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

<div class="trbp"><button class="trb">sign up</button></div>
 <div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>

Answer 2

使用问题中给出的代码，并假设它是需要背景的正文，您可以在正文中添加一个伪前元素并将背景放在上面并对其进行模糊处理。

这样只会模糊图像，不会模糊其他所有内容。

body {
  font-size: 15pt;
  width: 500px;
  height: 500px;
}

body::before {
  background-image: url("https://picsum.photos/id/1015/1024/768");
  filter: blur(8px);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  content: '';
  z-index: -1;
}

.trbp {
  width: 500px;
  height: 40px;
  border: black;
}

.trb {
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
  display: inline-block;
}

.btp {
  position: relative;
  top: 120px;
  left: 30px;
}

.bth {
  position: relative;
  top: 100px;
  left: 30px;
}

.blb {
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
  <h2 class="btp">welcom to</h2>
  <h2 class="bth">our site</h2>
  <button class="blb">about us</button></div>
<script src="main.js"></script>

我只想模糊图像，但它会影响一切

I want to blur only the image but it affects everything

html

css

border