如何添加覆盖 img 标签的图像？答案

【问题标题】：How can I add an image overlaying an img tag?如何添加覆盖 img 标签的图像？
【发布时间】：2017-09-14 18:04:05
【问题描述】：

有没有办法在 CSS 中为 img 标签上的图像添加图像背景？

我的网站上有一个类似于

的标签

<img src="image.jpg" alt="" />

我的CSS如下：

.field img {width: 354px; min-width: 354px; height: 200px; object-fit: cover;}

我不能方便地编辑 HTML，所以我希望找到一个 CSS 解决方案。有什么我可以添加到这个 CSS 来覆盖背景图像 over 图像的吗？我打算在链接到视频的图像上添加一些看起来像透明“播放”按钮的东西。

网上有很多想法可以回答这个问题，但我还没有看到不需要额外 div 的想法。

【问题讨论】：

播放按钮？它在您的 HTML 中的什么位置？
img、br、hr、input 和其他void elements 上不允许使用伪元素/子元素

标签： html css image tags background-image

【解决方案1】：

也许我回答得太晚了。但我找到了使用 css 属性 mix-blend-mode 的最佳方法。

body {
  font-family: Calibri
}

img {
  border-radius: 16px;
}

.card {
  position: relative;
  background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.75));
  width: 400px;
  height: 260px;
  border-radius: 16px;
  box-shadow: 0 2px 4px gray;
}

.card img.overlay {
  mix-blend-mode: overlay;
}

.card>.bottom-text {
  color: white;
  position: absolute;
  bottom: 20px;
  left: 40px;
  letter-spacing: 1px;
  font-weight: 100;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h3>Using the mix-blend-mode property</h3>

  <h4>With mix-blend-mode overlay:</h4>
  <div class="card">
    <img class="overlay" src="https://cdn.pixabay.com/photo/2017/12/10/15/16/white-horse-3010129_960_720.jpg" alt="Pineapple" width="400" height="260">
    <span class="bottom-text">
    IN RIDING A HORSE<br>
    WE BORROW FREEDOM
  </span>
  </div>
  <br>
  <h4>Original image without overlay:</h4>
  <div class="card">
    <img src="https://cdn.pixabay.com/photo/2017/12/10/15/16/white-horse-3010129_960_720.jpg" alt="Pineapple" width="400" height="260">
    <span class="bottom-text">
    IN RIDING A HORSE<br>
    WE BORROW FREEDOM
  </span>
  </div>

</body>

</html>

【讨论】：

【解决方案2】：

你的问题不清楚，来一个有趣的答案或者至少是无用的风格：

图片大小为零，也应用于背景。
填充显示背景
一些额外的 bg-image(linear-gradient) 来绘制一个假按钮。
tabindex 捕捉焦点

img {
  margin: 1em;
  cursor: pointer;
  height: 0;
  width: 0;
  padding: 100px 150px;
  background: linear-gradient(-35deg, transparent 50%, red 51%) no-repeat center 100px, linear-gradient(35deg, red 50%, transparent 51%) no-repeat center 80px, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/300/200/people/9);
  background-size: 30px 20px, 30px 20px, auto, auto;
}

img:hover {
  background: linear-gradient(-35deg, transparent 50%, white 51%) no-repeat center 100px, linear-gradient(35deg, white 50%, transparent 51%) no-repeat center 80px, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/300/200/people/9);
  background-size: 30px 20px, 30px 20px, auto, auto;
}

img:focus {
  background: linear-gradient(-35deg, transparent 100%, red 0%) no-repeat center 100px, linear-gradient(35deg, red 0%, transparent 0%) no-repeat center 80px, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/300/200/people/9);
  background-size: 30px 20px, 30px 20px, auto, auto;
}

&lt;img src="http://lorempixel.com/300/200/city/9" alt="play" tabindex="0" /&gt;

要链接到视频，您需要一个链接... :) CSS 不这样做

【讨论】：

【解决方案3】：

我认为应该这样做。我的工作正常

<style>
.overlay {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  width: 128px;
  height: 128px;
}
</style>

<img src="overlay.png" class="overlay" width="128" height="128" />

【讨论】：

【解决方案4】：

假设图像将位于<a> 标签内（因为它链接到视频），将锚标签样式设置为块，然后通过:before 应用播放按钮样式对您来说不是很有用吗？还是:after 伪元素？

检查一下：

<style>
    .field {
        display: inline-block;
        position: relative;
    }
    .field:before {
        content: "";
        display: inline-block;
        border-left: 50px solid red;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .field:hover:before {
        border-left-color: blue;
    }
    .field:focus:before {
        border-left-color: transparent;
    }
</style>
<a class="field">
    <img src="https://lorempixel.com/200/200/" alt="">
</a>

你可以使用背景图片，或者任何你可以在伪元素中使用的东西来展示你的播放按钮。我希望这可以有用！

【讨论】：

【解决方案5】：

如果你所有的图片都在一个单独的容器中，你可以像这样在 css 中使用 :after 伪选择器：

#myimages li {
  display: block;
  position: relative;
  float: left;
  margin: 5px;
}

#myimages li:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik04My4xLDQ0LjJMMjIuOCw5LjljLTIuMi0xLjItNC40LTEuMi02LjQsMGMtMiwxLjItMi45LDMuNC0yLjksNS42djY4LjhjMCwyLjIsMS4yLDQuNCwyLjksNS42YzEsMC41LDIuMiwxLDMuNCwxICBjMS4yLDAsMi4yLTAuNSwyLjktMWw2MC4zLTM0LjNjMi4yLTEuMiwzLjQtMy40LDMuNC01LjZTODUuMyw0NS43LDgzLjEsNDQuMnoiLz48L3N2Zz4=") left top no-repeat;
  opacity: .5;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul id="myimages">
    <li><img src="http://lorempixel.com/100/100/animals"></li>
    <li><img src="http://lorempixel.com/100/100/cats"></li>
    <li><img src="http://lorempixel.com/100/100/city"></li>
  </ul>
</body>
</html>

这只是一个非常简单的例子。在您的情况下，图像的父元素可能是指向视频网址的锚标记。

【讨论】：