Question

我将Reactjs与Bootstrap 4结合使用，我想制作一个类似于下图的标头。

我不知道如何获得相同的结果（线性渐变+背景图像）

图片链接是动态的，因此我在标题中使用了在线样式dans le

const backgroundStyle = {
    backgroundImage: `url(${getImageFromApi(movie.backdrop_path, 'IMAGE_BASE_URL')}),radial-gradient(circle at 20% 50%, rgba(11.76%, 15.29%, 17.25%, 0.98) 0%, rgba(19.61%, 21.96%, 23.53%, 0.88) 100%)`,
    backgroundRepeat:'no-repeat',
    backgroundPosition:'center center',
    backgroundSize:'cover',
    height:'85vh',
    maxWidth:"100%",
    marginTop:200
}

预先感谢您的帮助和解答。

Answer 1

您可以在图片标签中使用:after和:before来实现此设计。请仔细检查我的代码。

希望您能对您有所帮助。：）

让我知道进一步的澄清。

.image {
    position: relative;
    width: auto;
    display: inline-block;
}

.image::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to top , currentColor 5%, transparent 30%);
}

  .image::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 80%);
}

<div class="image">
  <img src="https://placekitten.com/800/500"/>
</div>

在背景图片中使用线性渐变

1 个答案: