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, отвечающий за сохранение содержимого в центре с помощью свойств bootstrap 4.

    • 2
  2. Best Answer

    Этого можно добиться очень простым способом: вам просто нужно добавить псевдоэлемент к тегу с фоном, который вы хотите размыть. Я рекомендую вам использовать, например, класс под названием «фоновое размытие» (или тот, который вы хотите) следующим образом:

    <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класс, который можно применить непосредственно к любому элементу с фоновым изображением, и вы хотите, чтобы он имел эффект «размытия». Более подробно каждое свойство выполняет следующие действия:

    • with background: inheritнаследует все свойства, которые вы назначаете родителю, такие как: background-image, background-size, background-color, background-position, etc, вы можете переопределить их, но это необязательно.
    • Поскольку размытие также приводит к тому, что края становятся нечеткими, я рекомендую использовать transform: scale()так, чтобы он становился немного больше, чем содержащий элемент, и, добавляя overflow: hidden, мы скрываем все, что выступает из родителя, в вашем случае тег <body>.
    • Другие свойства ( position, left, width, etc) должны заполнить размер родителя.

    В вашем случае элемент container такой же 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