Question

如何模糊背景而不是位于其上方的文本？这就是我要显示的方式。

Answer 1

在容纳文本的容器中，您可以选择使用透明色来或多或少地模糊。

例如

.container{
 color: white;
 background-color: rgba(140,140,140,0.5)
}

透明度是从0-1开始测量的。

0完全透明（不可见） 1是不透明的（纯色）

Answer 2

您必须对图像和文本使用两个不同的容器，并将它们放入父容器中，然后对文本容器使用绝对位置，并对图像容器设置模糊滤镜。

下面有一个示例：
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_blurred_bg

<!DOCTYPE html>
            <html>
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
            body, html {
              height: 100%;
              margin: 0;
              font-family: Arial, Helvetica, sans-serif;
            }
            
            * {
              box-sizing: border-box;
            }
            
            .bg-image {
              /* The image used */
              background-image: url("https://i.ytimg.com/vi/nxkpa7oHRrc/maxresdefault.jpg");
              
              /* Add the blur effect */
              filter: blur(8px);
              -webkit-filter: blur(8px);
              
              /* Full height */
              height: 100%; 
              
              /* Center and scale the image nicely */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }
            
            /* Position text in the middle of the page/image */
            .bg-text {
              background-color: rgb(0,0,0); /* Fallback color */
              background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
              color: white;
              font-weight: bold;
              border: 3px solid #f1f1f1;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 2;
              width: 80%;
              padding: 20px;
              text-align: center;
            }
            </style>
            </head>
            <body>
            
            <div class="bg-image"></div>
            
            <div class="bg-text">
              <h2>Blurred Background</h2>
              <h1 style="font-size:50px">I am John Doe</h1>
              <p>And I'm a Photographer</p>
            </div>
            
            </body>
            </html>

如何模糊背景

2 个答案: