CSS - изображение с наложениями/размытым фоном по диагонали

Я хочу, чтобы те части, которые «белеют», размывали изображение.

Я пытался использовать псевдоэлементы ::after и ::before для добавления наложений, но смог только размыть наложение.

пробовал с границами 2-й пример codepen, но безуспешно, потому что с прозрачностью он создает «квадрат».

https://codepen.io/giventofly/pen/RQpqYZ

.hero-image {
  width: 1280px;
  height: 800px;
  background-image: linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0), linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0), linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0),
                    url('https://cdn.vox-cdn.com/thumbor/NU6lcSN3DGmjF7NhZp6ixY3HxgQ=/0x0:1620x1080/1200x800/filters:focal(0x0:1620x1080)/cdn.vox-cdn.com/uploads/chorus_image/image/46510678/Tarmogoyf_DGM_1920x1080_Wallpaper.0.0.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;   
  z-index: 10;
}

<div class="hero-image"></div>

Я хочу размыть только ту часть изображения, которая находится «за» белым линейным градиентом.


css background-image css-filters
person José Moreira    schedule 13.02.2018    source источник
comment
я отредактировал свой ответ, так как в начале я плохо его понимаю;)   -  person Temani Afif    schedule 13.02.2018

Ответы (2)


arrow_upward
2
arrow_downward

Я уверен, что кто-то может немного улучшить этот подход, но основные выводы таковы:

  • Дважды включите изображение в элемент-контейнер.
  • Сложите два изображения.
  • Размойте один и поместите его внизу.
  • Используйте clip-path на верхнем изображении, чтобы отобразить неразмытую область.
  • Вставьте слой мороза (прозрачный белый) с псевдоэлементом контейнера между двумя изображениями.
  • Управляйте слоями с помощью позиционирования и z-индекса.

.img-overlay {
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.img-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba( 255, 255, 255, 0.5 );
  z-index: 1;
}

.img-overlay img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur( 3px);
  z-index: 0;
}

.img-overlay img:last-child {
  position: relative;
  z-index: 2;
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
<div class="img-overlay">
  <img src="http://unsplash.it/400/400?image=16">
  <img src="http://unsplash.it/400/400?image=16">
</div>

person hungerstar    schedule 13.02.2018
comment
так же, как я, нет? :) - person Temani Afif; 14.02.2018
comment
Они очень похожи. Я начал свой пост, когда вы удалили свой. Я отлучился ненадолго, доделал и опубликовал. После обновления страницы вы обновили свой ответ и восстановили его. Основное различие заключается в том, как включаются изображения (<img> против background-image) и как создается цветовое наложение (псевдоэлемент против linear-gradient). - person hungerstar; 14.02.2018
comment
собираюсь выбрать это как лучший ответ из-за подхода. можно только проголосовать за другого. - person José Moreira; 14.02.2018

arrow_upward
2
arrow_downward

Вы можете использовать clip-path для этого. Идея состоит в том, чтобы иметь два одинаковых слоя, верхний с clip-path, чтобы показать только необходимую часть и оставить видимым размытие на нижнем слое. Вы можете переключать размытие между обоими элементами, если вместо этого хотите размыть среднюю часть:

.hero-image {
  width: 600px;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.hero-image:after,
.hero-image:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: center/cover no-repeat;
  background-image: 
   linear-gradient(rgba(46, 51, 82, 0.6) 100%, transparent 0), 
   linear-gradient(125deg, rgba(255, 255, 255, 0.5) 35%, transparent 0), 
   linear-gradient(-55deg, rgba(255, 255, 255, 0.5) 25%, transparent 0), 
   url('https://picsum.photos/id/1024/800/800');
}

.hero-image:before {
  filter: blur(4px);
}

.hero-image:after {
  clip-path: polygon(45% 0, 97% 0, 68% 100%, 16% 100%);
}
<div class="hero-image"></div>

person Temani Afif    schedule 13.02.2018