将悬停效果应用于具有动态背景图像的反应卡

Question

我正在开发一个 React 项目，其中有一组卡片，每个卡片都有一个从 JSON 文件加载的动态背景图像。我的目标是在这些卡片上创建悬停效果，其中背景图像变暗，并出现标题和小描述。我已经设法使用不透明度过渡来显示标题和描述，但我面临着使背景图像变暗的挑战，因为我无法使用 CSS 直接对其应用线性渐变。我正在寻找一种简单有效的解决方案来实现这种效果，而又不会使代码过于复杂。

当前代码： 这是我的卡片组件的当前代码结构：

const Card = ({ card }) => {
  return (
    <div className="home__prom-card" style={{ backgroundImage: `url(${card.image})` }}>
      <div className="home__prom-card_price">
        <h3>{card.price}</h3>
      </div>
      <h2>{card.name}</h2>
      <p>{card.description}</p>
    </div>
  );
};

当我将鼠标悬停在卡片上时，在背景图像上应用变暗的叠加层时遇到了困难。由于背景图像是从 JSON 文件动态加载的，因此我无法直接使用 CSS 应用线性渐变叠加。

Answer 1

我的方法是在卡片内创建一个绝对定位的 div 并将其与背景图像属性一起使用。

结构

结构如下所示：

（创建新的 home__prom-background div）

const Card = ({ card }) => {
  // home__prom-card will be changed to <Link> from React Routing soon
  return (
    <div className="home__prom-card">

      <div className="home__prom-background" style={{ backgroundImage: `url(${card.image})` }} />

      <div className="home__prom-card_price">
        <h3>{card.price}</h3>
      </div>
      <h2>{card.name}</h2>
      <p>{card.description}</p>
    </div>
  );
};

造型

现在是 CSS 部分。 我们在卡片上添加relative位置，这样背景div就可以使用百分比的宽度和高度来使其适合完整尺寸。另外，我们将背景设为黑色，因此当降低背景的 div 不透明度时，它看起来会更暗。

在设置背景 div 样式时，我们将 position 设置为 absolute，将 width 和 height 设置为 100%。最后，我们为背景添加一些其他参数和不透明度的过渡。

不要忘记为文本设置更高的z-index，以便您可以在背景图像上看到它。

对于悬停效果，我们将在卡片悬停时更改背景 div 的不透明度。此外，我们将更改您要显示的文本的不透明度。

.home__prom-card {
    position: relative;
    background-color: black;

    > .home__prom-background {
        position: absolute;
        top: 0;left: 0;
        z-index:0;

        height: 100%;
        width: 100%;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        transition: opacity .3s ease-in-out;
    }

    > h2, > p, > .home__prom-card_price {
        z-index:2;
    }

    &:hover {
        
        > .home__prom-background {
            opacity: .6;
        }

        > h2, > p {
            opacity: 1;
        }

    }

}