Как применить линейный градиент над изображением с источником изображения вне стилей CSS - PullRequest
Новая
       48

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

0 голосов
/ 19 октября 2019

Решения, которые я видел, имеют 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, поэтому всякий раз, когда яприменить линейный градиент, он помещается за выбранным изображением.

Есть ли способ обойти это ?? Спасибо

1 Ответ

0 голосов
/ 19 октября 2019

Вы можете использовать абсолютно позиционированный псевдоэлемент (::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>
...