Question

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

我的网站上有一个类似于

的标记

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

我的CSS如下：

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

我无法方便地编辑HTML，因此我希望找到一个CSS解决方案。我可以添加一些内容来覆盖背景图像覆盖图像吗？我计划添加一些看似透明的游戏＆＃34; play＆＃34;链接到视频的图像上的按钮。

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

Answer 1

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

图片大小为零，也适用于背景。
填充以显示背景
绘制假按钮的额外bg图像（线性渐变）。
tabindex以引起关注

＆＃13;

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;
}

＆＃13;

<img src="http://lorempixel.com/300/200/city/9" alt="play" tabindex="0" />

＆＃13;

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

Answer 2

我相信这样的事情应该做。在我的最后工作正常

<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" />

Answer 3

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

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

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

Answer 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>

您可以使用背景图片，或者在伪元素中使用的任何内容来说明您的播放按钮。我希望这可能有用！

Answer 5

也许我回答的有点晚了。但我发现使用 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>

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

5 个答案: