如何将图像放在另一个图像上[关闭]答案

【问题标题】：How to put an image on another one [closed]如何将图像放在另一个图像上[关闭]
【发布时间】：2015-09-07 13:53:32
【问题描述】：

我有一张图片，我想在上面放一张透明背景的图片。有没有 jquery 之类的简单解决方案？我不想与职位等打架例如，我需要在单击某些内容后动态添加它

【问题讨论】：

你会以一种或另一种方式'与职位战斗'......
所以您不想“与职位争斗”但您乐于使用 jquery？位置有什么问题......他们比JQ更容易？
忘了说需要动态添加。
jsfiddle.net/RachGal/gcvsz9cm

标签： javascript jquery css

【解决方案1】：

创建一个 div 并使用一个图像作为背景图像。现在将您的图像放入该 div 中。

【讨论】：

这是一些想法。谢谢！

【解决方案2】：

为 IE8 或更早的浏览器添加了过滤器：alpha(opacity=60)

只需将背景属性更改为图片链接

.background_picture {
    background: red;
    width: 200px;
    height: 200px;
}
.front_picture {
    background: white;
    opacity: 0.6; /* change this to 1 to completely hide background_picture */
    filter: alpha(opacity=60); /* For IE8 and earlier */
    height: 100%;
}

<div class="background_picture">
    <div class="front_picture">
    </div>
</div>

【讨论】：

【解决方案3】：

HTML：

<div id="background"></div>
<input type="submit" value="Add Image" onclick="show();" />

CSS：

div { background-image: url('path/to/background.filetype'); height: 200px;}
img { opacity: 0.5; }

JavaScript：

function show() {
    document.getElementById('background').innerHTML = '<img src="path/to/image.filetype" />';
}

您需要澄清“动态”的含义，但这是一种使用 JavaScript（具有您描述的图形属性）添加图像的动态方式。

【讨论】：

谢谢，但我必须以动态方式完成此操作
以什么方式“动态”？

【解决方案4】：

这是您在点击时动态添加图像的方式。希望对你有帮助

$("#flowers").click(function() {
  var _this = $(this);
  var current = _this.attr("src");
  var swap = _this.attr("data-swap");
  _this.attr('src', swap).attr("data-swap", current);
  _this.toggleClass("opaque");
});

.opaque {
    opacity:.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id='flowers' src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />

【讨论】：

非常感谢。不幸的是，我忘了提到我需要在 onclick 之后以动态方式放置第二个