Question

我正在制作此page section的html标记。正如你在这里看到的，它是三个图像。当我将鼠标光标放在其中一个上时，图像会移动并变为叠加线性渐变。图像代码

代码

＆＃13;

.image_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image_row img:hover,
.image_row img:focus {
  transform: translate(-9px, -9px);
  box-shadow: 10px 10px #95e1d3;
}

＆＃13;

<div class="image_row">
  <img src="image-1" height="250" width="380" />
  <img src="image-2" height="250" width="380" />
  <img src="image-3" height="250" width="380" />
</div>

＆＃13;

我的问题是我不知道如何为图片制作渐变叠加效果。我尝试了以下代码，但它没有带来任何影响：

.image_row img:hover,
.image_row img:focus{
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
background-image: -moz-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
mix-blend-mode: normal;
opacity: 0.9;
}

Answer 1

你可以添加一个带有CSS的伪元素，它覆盖图像并显示在悬停/焦点上，它也具有渐变效果。

我将您的代码修改为以下示例：

＆＃13;

.image_row {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .image_row img:hover,
    .image_row img:focus {
      transform: translate(-9px, -9px);
      box-shadow: 10px 10px #95e1d3;
    }
    
    img {
      display: block;
    }

    .image {
      position: relative;
    }

    .image::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .image:hover,
    .image:focus {
      transform: translate(-9px, -9px);
      box-shadow: 10px 10px #95e1d3;
    }

    .image:hover::before,
    .image:focus::before {
      background-image: -moz-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
      background-image: -webkit-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
      background-image: -ms-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
      mix-blend-mode: overlay;
    }

＆＃13;

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="image_row">
    <div class="image">
      <img src="http://via.placeholder.com/380x250" height="250" width="380" />
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/380x250" height="250" width="380" />
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/380x250" height="250" width="380" />
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

我建议使用div而不是img标签。类似的东西可能适合你：

＆＃13;

.image_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image_row div:hover,
.image_row div:focus {
  transform: translate(-9px, -9px);
  box-shadow: 10px 10px #95e1d3;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.overlay:hover:after {
  opacity: .5;
}

.red_overlay:after {
  background-image: -moz-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
}

.box {
  width: 380px;
  height: 250px;
  border: 1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  ;
}

＆＃13;

<div class=image_row>
  <div style="background-image:url(images/1.jpg)" height="250" width="380" class="box overlay red_overlay">
  </div>

＆＃13;

Answer 3

是的，对于img标签，使用背景：对我有用的父div上的线性渐变：

<

div class="home-hero-two-image">
<img src="./resources/images/homepage/mobile-header-img.jpg" />
</div>

.home-hero-two-image {
    transform: scaleX(1);
                }

.home-hero-two-image ::after {
    position: absolute;
    content: "";
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: rgb(54, 62, 75);
    background: linear-gradient(
    0deg,
    rgba(54, 62, 75, 0) 51%,
    rgba(enter code here54, 62, 75, 0.8855917366946778) 100%
   );
}

如何使用css向<img/>元素添加渐变叠加？

3 个答案: