Question

我是一名学生，目前正忙于创建自己的网站，但现在我有一个我无法弄明白的问题。我的网站是关于职业自行车运动的，我会有一些团队的球衣，我想用鼠标覆盖它时要叠加。我认为这很好，但现在碰巧，如果我用鼠标移动它，一个大方块覆盖图片（因为它是一个透明背景的方形图片），我希望只有一个覆盖在球衣和没有超过图片的“背景”。

我希望你能帮助我！需要解决这个问题！提前谢谢！

VARCHAR(900)

.container {
  position: relative;
  width: 25%;
  height: auto;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00b0f0;
  opacity: 0.8;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.container:hover .overlay {
  height: 100%;
}
.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Answer 1

我找到了一个relevant Stack Overflow thread，其中大家一致认为这是CSS无法实现的，除非您想要使用过滤器完成纯黑色图像 - 这些图像在所有浏览器中都不兼容，并且不会有滑动过渡＃39;已实施。

所以我选择向您展示如果您自己在Photoshop中创建蓝色叠加层作为单独的PNG图像并使用它们进行转换，这将是什么样子。我创建the PNG创建了一个填充#00b0f0的图层，将其设置为80％不透明度并将其用作剪贴蒙版 - 基本上是您.overlay尝试执行的操作。这是一个演示：

＆＃13;

.container {
  position: relative;
  width: 25%;
  height: auto;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.8;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.overlay .image {
  position: absolute;
  bottom: 0;
}
.container:hover .overlay {
  height: 100%;
}
.text {
  white-space: nowrap;
  color: white;
  text-shadow: #000 0 1px 1px;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

<div class="container">
  <a href="AG2R.html">
    <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image">
  </a>
  <div class="overlay">
    <img src="https://i.stack.imgur.com/DwIGH.png" alt="overlay" class="image" />
    <div class="text">AG2R La Mondiale</div>
  </div>
</div>

＆＃13;

图片叠加...仅在真实图片的区域而不是图片的背景

1 个答案: