Home / Questions / 156739
Accepted
Sebastián Lagos Yañez
Asked: 2020-04-18 10:12:35 +0800 CST 2020-04-18 10:12:35 +0800 CST

如何使用具有模糊效果的 bootstrap 4 放置背景图像？

  • 772

您好，事实证明我有以下代码将图像放在boostrap 4后面，但我不知道如何在不影响内容的情况下对其进行模糊效果，如这段代码所示：

html,body{
            height: 100%;
            width: 100%;

        }
body{
  /* The image used */
  background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
            /* Full height */
            height: 100%;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

        }
        .vdivide [class*='col-6']:not(:last-child):after {
            background: #e0e0e0;
            width: 1px;
            content: "";
            display:block;
            position: absolute;
            top:0;
            bottom: 0;
            right: 0;
            min-height: 70px;
        }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 
 <div class="container-fluid h-100 ">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="card col-8">
                <div class="card-body w-100 col">
                    <div class="row vdivide ">
                        <div class="col-6 ">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                        <div class="col-6">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                    </div>

                </div>
            </div>
    </div>

所以我不知道如何让它看起来不错，是否有用于引导程序的属性或者是否使用 css3 处理？. 如果你能帮助我，那将非常有帮助。谢谢。

css3

2 Answers

  1. 环顾四周，我找到了解决方案，我把它留在这里，这样你就可以看到它是否正确，但目前它对我有用，它只会让它响应。

    html,body{
            height: 100%;
            width: 100%;
        }
        .vdivide [class*='col-6']:not(:last-child):after {
            background: #e0e0e0;
            width: 1px;
            content: "";
            display:block;
            position: absolute;
            top:0;
            bottom: 0;
            right: 0;
            min-height: 70px;
        }

        .background-image {
             background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
     
            background-size: cover;
            display: block;

            filter: blur(10px) contrast(30%);

            height: 100%;
            width: 100%;
            left: 0;
            position: fixed;
            right: 0;
            z-index: 1;
        }
        .content {
            left: 0;
            position: fixed;
            right: 0;
            z-index: 2;
        }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!---SE AGREGA ESTE DIV PARA EL FONDO---->
 <div class="background-image"></div>
 <!--------SE AGREGA LA CLASE CONTENT-------->
 <div class="container-fluid h-100  content">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="card col-8">
                <div class="card-body w-100 col">
                    <div class="row vdivide ">
                        <div class="col-6 ">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                        <div class="col-6">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                    </div>

                </div>
            </div>
    </div>

    创建两个background-image负责放置图像和制作效果blur的类content，以及负责使用引导程序 4 属性将内容保持在其中心位置的类。

    • 2
  2. Best Answer

    有一种非常简单的方法可以实现这一点，您只需向具有要模糊背景的标签添加一个伪元素。例如，我建议您使用一个名为“background-blur”（或您想要的）的类，如下所示：

    <body class="fondo-blur">

    在 css 中，只需添加 .

    .fondo-blur{
  position: relative;
  overflow: hidden;
}

.fondo-blur::before{
  content: '';
  display: block;
  background: inherit;
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  filter: blur(15px);
  transform: scale(1.2,1.4);
}

    在这种情况下，它fondo-blur是一个直接应用于任何具有背景图像的元素并且您希望它具有“模糊”效果的类。有关更多详细信息，每个属性都执行以下操作：

    • Withbackground: inherit将继承您分配给父级的所有属性，例如：background-image, background-size, background-color, background-position, etc，您可以覆盖它们，但它是可选的。
    • 由于模糊也会导致边缘变得模糊，我建议使用transform: scale()它使其比包含元素大一点，并通过添加overflow: hidden，我们隐藏从父元素突出的所有内容，在您的情况下为 tag <body>。
    • 其他属性 ( position, left, width, etc) 用于填充父级的大小。

    在您的情况下，容器元素是相同的body，因此我将直接在 css 中将这些相同的属性添加到您的标签中，例如：

    html,body{
  height: 100%;
  width: 100%;

}
body{
  /* The image used */
  background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

body::before{
  content: '';
  display: block;
  background: inherit;
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  filter: blur(15px);
  transform: scale(1.2,1.4);
}

.vdivide [class*='col-6']:not(:last-child):after {
    background: #e0e0e0;
    width: 1px;
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    min-height: 70px;
}


        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 
 <div class="container-fluid h-100 ">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="card col-8">
                <div class="card-body w-100 col">
                    <div class="row vdivide ">
                        <div class="col-6 ">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                        <div class="col-6">
                            <img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
                        </div>
                    </div>

                </div>
            </div>
    </div>

    你可以这样做，或者像我一开始告诉你的那样。

    • 2