如何在不重复的图像边缘上应用等效的线性渐变和不透明度 [英] How to apply equivalent of linear-gradient with opacity on edges of non-repeated image

问题描述

例如

Like How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS, but instead of a seamless background image, just a regular old image. How to do the same thing? Right now when I try it on a non-repeated background image the whole image is covered in the gradient.

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>

我上面(上面)的东西是不正确的，图像全部被渐变覆盖了，而我只想覆盖32px之类的边缘(顶部和底部).

What I have there (above) is incorrect, the image is all covered under the gradient while I just want the edges (top and bottom) like 32px covered.

推荐答案

仅将cover移至图像，否则它将应用于渐变并覆盖5% 32px

move cover to only the image or it will get apply to gradient and will override the 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>

或在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>

这篇关于如何在不重复的图像边缘上应用等效的线性渐变和不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！