Изображение сторон размыто растяжением - PullRequest
Новая
       71

Изображение сторон размыто растяжением

0 голосов
/ 30 сентября 2019

Я хочу, чтобы у моего div были размытые стороны

Я попытался добавить изображение в качестве фона в div и сделать его центром, стороны белые, я хочу, чтобы они имели растянутый эффект размытия

background: url (image.jpeg) центр центра без повтора;

я хочу что-то похожее на ожидаемый код: background: 25% размытие вправо, 25% размытие влево, url (image.jpeg) без повторацентр центр;

ожидаемый результат:

введите описание изображения здесь

Исходное изображение: введите описание изображения здесь

1 Ответ

0 голосов
/ 30 сентября 2019

Попробуйте, если у вас есть изображение с высоким разрешением, замените фоновое изображение css (.bg-image) на 

.bg-image {
    background-image: url(https://i.stack.imgur.com/KGa2E.png);
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 100%;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.5);
}

/* Position text in the middle of the page/image */
.bg-text {

  color: white;
  font-weight: bold;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
<div class="bg-image"></div>

<div class="bg-text">
<img src="https://i.stack.imgur.com/KGa2E.png">

  
</div>
...