Ionic 带有渐变覆盖的背景图像React

pgvzfuti 于 2022-12-09 发布在 Ionic

关注(0)|答案(2)|浏览(161)

我正在尝试为div设置一个背景图像，并添加一个颜色覆盖。使用普通CSS，这看起来像这样：

.backgroundImage {
 background-image:
 linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
 url('../img/backgroundimage.jpg');
 width: auto;
 height: 40vh;
 background-size: cover;
}

这种CSS方法对我来说不起作用，因为我构建的组件将被动态填充（不同的图片、文本内容等）。
我试过导入一个图像，并做同样的css上面提到的。不知何故，我可以设置背景图像，但不能让渐变覆盖工作在我的风格对象。
所以我的下一个方法是将我的div Package 在另一个div中，并在那里设置渐变。这似乎也不起作用...
我希望有比我聪明的人能回答这个问题。
干杯！干杯！

const wrapperPictureBox {
 background: "linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73))"
}

const pictureBox = {
 background: ` url(${backgroundimage})`,
 height: "40vh",
 backgroundSize: "cover",
};

 <div style={wrapperPictureBox}>
  <div style={pictureBox}>text</div>
 </div>

ionic-framework

来源：https://stackoverflow.com/questions/65764888/background-image-with-gradient-overlay-react

2条答案

按热度按时间

ne5o7dgx1#

你可以用CSS变量的方式。这个codepen演示。
基本上，在React文件中：

<div style={{"--img": "url('https://images.unsplash.com/photo-1610907083431-d36d8947c8e2')"}}>text</div>

在CSS中：

background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), var(--img);

如果梯度也必须是动态的，则类似的方法应该仍然有效。

赞(0）回复(0）举报 2022-12-09

ndasle7k2#

第一个答案很有效。
我只是添加了您希望使用的另一个选项。
您可以将img url设置为PROPS，以使您的代码更加动态和健壮。
以下是我的使用案例：

function SndHeader({ bgImage }) {
    return (
      <div className="sndHeader" style={{ "--img": `url(${bgImage}), 
      linear-gradient(#e66465, #9198e5)` }}>
      <h1>Your Title</h1>
    </div>
  )
}

我的CSS看起来非常小，可以帮助您将所有内容集中在分区内

.sndHeader {
    display: block;
    border-radius: 0px 0px 57px 57px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    text-align: center;
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 
    0.52), rgba(117, 19, 93, 0.73)),
    var(--img);
    background-size: cover;
}

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 带有渐变覆盖的背景图像React

2条答案

相关问题

热门标签

最新问答