时间戳

首页 > 解决方案 > 在背景图像中使用线性渐变

css - 在背景图像中使用线性渐变

问题描述

我将 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
}

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

标签： cssreactjs

解决方案

您可以在图像标签中使用: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>

推荐阅读