Как применить эквивалент линейного градиента с непрозрачностью по краям неповторяющегося изображения

Как Как сделать эквивалент линейного градиента с непрозрачностью на бесшовном фоновом изображении в CSS, но вместо бесшовного фонового изображения просто обычное старое изображение. Как сделать то же самое? Прямо сейчас, когда я пробую его на неповторяющемся фоновом изображении, все изображение покрывается градиентом.

div {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to bottom, #fff, transparent) top/5% 32px no-repeat,
    linear-gradient(to top, #fff, transparent) bottom/5% 32px no-repeat,
    url(https://picsum.photos/id/984/1000/1000) no-repeat;
  background-size: cover;
}
<div></div>

То, что у меня там (вверху) неверно, все изображение покрыто градиентом, а мне просто нужны края (верх и низ) размером 32 пикселя.


css background-image linear-gradients
person Lance Pollard    schedule 28.07.2019    source источник
comment
вы применяете покрытие, которое также повлияет на градиент   -  person Temani Afif    schedule 29.07.2019
comment
Я хотел бы, чтобы изображение заполнило пространство, но чтобы края градиент-затухания были прозрачными, однако это возможно в CSS (или JS, если это невозможно в CSS).   -  person Lance Pollard    schedule 29.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

переместите cover только на изображение, иначе оно будет применено к градиенту и переопределит 5% 32px

div {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to bottom, #fff, transparent) top/100% 32px no-repeat,
    linear-gradient(to top, #fff, transparent) bottom/100% 32px no-repeat,
    url(https://picsum.photos/id/984/1000/1000) center/cover no-repeat;
}
<div></div>

Или укажите 3 значения в background-size

div {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to bottom, #fff, transparent) top,
    linear-gradient(to top, #fff, transparent) bottom,
    url(https://picsum.photos/id/984/1000/1000);
  background-size:100% 32px,100% 32px,cover;
  background-repeat:no-repeat;
}
<div></div>

person Temani Afif    schedule 29.07.2019