CSS：如何在鼠标悬停时从背景图像中移除带有过渡效果的色调？

Question

我有以下 HTML 和 CSS 样本，其中我的图像染有红色。当我将鼠标悬停在它上面时，色调会被移除 - 这是通过再次插入没有色调的图像来实现的。

问题是它非常瞬时 - 没有过渡。我试图插入一个过渡，但它似乎不起作用。

div {
  background-image: linear-gradient(to bottom,
      rgba(250, 0, 0, 0.5),
      rgba(250, 0, 0, 0.5)), url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
  height: 300px;
  width: 300px;
  background-size: 300px;
  transition: all 2s ease-out;
}

div:hover {
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
  transition: all 2s ease-out;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div>
    
    </div>
  </body>

</html>

Answer 1

您正在尝试制作动画 background-image，但无法完成，

为什么不使用 after 伪元素来代替

div {
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
  height: 300px;
  width: 300px;
  background-size: 300px;
  position: relative;
}


div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: red;
opacity: 0.5;
transition: .5s;
}

div:hover:after {
opacity: 0;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div>
    
    </div>
  </body>

</html>

Answer 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .elem1 {
        background-image: linear-gradient(
            to bottom,
            rgba(250, 0, 0, 0.5),
            rgba(250, 0, 0, 0.5)
          ),
          url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
        height: 300px;
        width: 300px;
        background-size: 300px;
        transition: all 2s;
        position: relative;
      }

      .elem2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
        opacity: 0;
        background-size: cover;
      }

      .elem2:hover {
        transition: all 2s;
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <div class="elem1">
      <div class="elem2"></div>
    </div>
  </body>
</html>

Answer 3

有些 CSS 属性是 animatable，有些则不是。不幸的是，您不能将 transition 应用到 background-image，但您仍有选择：

您可以使用 box-shadow 来达到预期的效果：

div {
  background: url("https://homepages.cae.wisc.edu/~ece533/images/cat.png") 50% / 300px;
  height: 300px;
  width: 300px;
  box-shadow: inset 0 0 0 150px #f008;
  transition: 1s ease-out;
}

div:hover {
  box-shadow: inset 0 0 0 150px #0000;
}

<div></div>

或者使用 background-blend-mode 如果 you're open to:

div {
  background:#f008 url("https://homepages.cae.wisc.edu/~ece533/images/cat.png") 50% / 300px;
  background-blend-mode: overlay;
  height: 300px;
  width: 300px;
  transition: 1s ease-out;
}

div:hover {
  background-color:#0000;
}

<div></div>

另一种选择是使用 border:

div {
  background:url("https://homepages.cae.wisc.edu/~ece533/images/cat.png") 50% / 300px;
  border:solid 150px #f008;
  box-sizing:border-box;
  height: 300px;
  width: 300px;
  transition: 1s ease-out;
}

div:hover {
  border-color:#0000;
}

<div></div>

或者您可以使用绝对定位（伪）元素，正如其他答案所建议的那样。

希望对您有所帮助。

CSS：如何在鼠标悬停时从背景图像中移除带有过渡效果的色调？

CSS: How to remove a tint with a transition from a background image on hover?

html

css

animation

css-transitions