Как размыть края изображения на переднем плане при использовании Bootstrap 4 - PullRequest
Новая
       39

Как размыть края изображения на переднем плане при использовании Bootstrap 4

0 голосов
/ 22 февраля 2020

Я пытаюсь размыть края изображения, как показано на рисунке { ссылка }.

Мне нужно сделать это на изображении переднего плана (а не на одном из css), потому что URL-адрес img динамически изменяется. Но тень от рамки, кажется, не влияет на изображение на переднем плане. Также я использую класс Bootstrap 4.3 img-fluid.

Другими словами, код на посте SO, указанном выше, работает, но края этого изображения не размыты (css для простота): 

<img src="/images/mypic.jpg" 
    class="img-fluid" 
    style="box-shadow: 0 0 5px 5px white inset;">

.img-fluid наборы max-width: 100% и height:auto. Я попытался переопределить их с указанными значениями c (что я не хочу делать для поддержания адаптивного изображения), но это также не имело никакого эффекта.

Ответы [ 3 ]

1 голос
/ 22 февраля 2020

Вам нужно обернуть тег img элементом div с именем класса .img-blur, поэтому используйте псевдоэлемент :after для вставки некоторого содержимого после содержимого элемента. 

.img-blur{
  position: relative;
  display: inline-block;
}
.img-blur:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 10px 10px #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row" >
    <div class="col-4 my-3">
      <div class="img-blur">
        <img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
      </div>
    </div>
    <div class="col-4 my-3">
      <div class="img-blur">
        <img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
      </div>
    </div>
    <div class="col-4 my-3">
      <div class="img-blur">
        <img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
      </div>
    </div>
  </div>
</div>
0 голосов
/ 22 февраля 2020

Существует проблема с изображениями стиля с inset.

Но у вас есть 2 варианта сделать это. Вы можете добавить контейнер с относительной позицией и поместить внутри него img с классом img-fluid и div с абсолютным положением для этого контейнера.

Второй вариант - установить контейнер с относительной позицией и img внутри и стилизовать этот контейнер. с псевдоклассом ::after.

Если вы это сделаете, это сработает, но возникнет проблема с правой тенью-тенью, которая, если img меньше контейнера. Вы можете исправить это, если будете использовать какой-то код JS.

Я сделал пример с jQuery (потому что вы используете bootstrap, а bootstrap использует jquery).

https://codesandbox.io/s/flamboyant-wing-z9lhm

0 голосов
/ 22 февраля 2020

К сожалению, CSS 'Inset' Тени Box не работают на img тегах. Чтобы обойти это, у вас есть несколько вариантов, например, можно обернуть изображение в тег div и использовать псевдоэлемент, чтобы применить к нему box-shadow.

Проблема здесь что, как правило, тег div является элементом «Блок» и, таким образом, будет охватывать всю родительскую ширину. Вы можете исправить это, применив свойство display: inline-block или float: left. Возможно, это не самый лучший «стандарт-совместимый», но будет работать над этим делом. Я прилагаю пример с этой концепцией ниже: 

div {
  position: relative;
  display: inline-block;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px 5px white inset;
}
<div>
  <img src="https://picsum.photos/200/300" class="img-fluid">
</div>
...