如何在圖像源不在 CSS styles 內的圖像上應用線性漸變

Question

我見過的解決方案是 CSS url(image-path) 然后是線性漸變，但我有

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>