Question

我有一张图片，我想在其上放置另一张透明背景的图片。有没有jquery或其他什么简单的解决方案？我不想与职位等战斗我需要动态添加它，例如在点击

之后

Answer 1

创建一个div并使用一个图像作为背景图像。现在把你的形象放在那个div里面。

Answer 2

<强> 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添加图片的动态方式（使用您描述的图形属性）。

Answer 3

这是您在点击时动态添加图片的方式。希望它有所帮助

＆＃13;

$("#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");
});

＆＃13;

.opaque {
    opacity:.5;
}

＆＃13;

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

＆＃13;

Answer 4

为IE8或更早版本的浏览器添加了过滤器：alpha（opacity = 60）

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何将图像放在另一个上

4 个答案: