时间戳

首页 > 解决方案 > 背景图像上的内联线性渐变

css - 背景图像上的内联线性渐变

问题描述

我有一张带有轻微黑色线性渐变的图像，以提高可读性

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/slideshow/2.jpg");

但是我使用的幻灯片只接受具有内联backgroundImage属性的 div

<div
          className="slideshow-image"
          style={{ backgroundImage: `url(${slideshow2})`, repeat: "no-repeat" }}
        >

问题是我无法使用内联样式添加图像之前的线性渐变。

//attempt 1
const backgroundStyle = {
    backgroundImage: `url(${slideshow1})`,
    linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
  };

// attempt 2 
style={{
            linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
            backgroundImage: `url(${slideshow1})`,
            repeat: "no-repeat",
          }}


//attempt 3 
.slideshow-image {
 
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

这些都不会在图像上显示任何内容。接下来我可以尝试什么来实现这一目标？

标签： cssreactjsinline

解决方案

推荐阅读