如何在图像源不在 CSS 样式内的图像上应用线性渐变

Question

我看到的解决方案是 CSS url(图像路径) 然后是线性渐变，但我有

class Example extends Component {
    render() {
        return (
            <div className="carousel__container">
                <Carousel infiniteLoop="true" autoPlay="true" showThumbs="false" showIndicators="false">
                    {this.props.items.map(movie => {
                    return  <div className="carousel__image" key={movie.id}><img src={`${this.props.MDBConfig.images.secure_base_url}original${movie.backdrop_path}`} alt={movie.title}/><h1 className="carousel__title">{movie.title}</h1></div>
                    })}
                </Carousel>
            </div>
        );
    }
}

图像源来自 React 内部，而不是来自 CSS URL，所以每当我应用线性渐变时，它都会放在获取的图像后面。

有办法解决这个问题吗？？谢谢

Answer 1

可以在图片上方使用绝对定位伪元素(::before)，用来显示渐变背景

示例：

const Image = ({ movie }) => (
  <div className="carousel__image" key={movie.id}>
    <img src={movie.src} alt={movie.title}/>
    <h1 className="carousel__title">{movie.title}</h1>
  </div>
);

const movie = { id: 1, src: 'https://picsum.photos/500/200', title: 'demo' };

ReactDOM.render(
  <Image movie={movie} />,
  root
);

.carousel__image {
  position: relative;
  display: inline-block;
}

.carousel__image::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    #465298 20px,
    #465298 30px
  );
  pointer-events: none;
  content: '';
}

/** if you want the header above the gradient **/
.carousel__image h1 {
  position: relative;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

如何在图像源不在 CSS 样式内的图像上应用线性渐变

How do I apply linear gradient OVER an image with image source not inside CSS styles

javascript

css

gradient

background

sass