如何将图像放在另一个上

-4

我有一个图像，我想把另一个图像上有透明背景。有没有简单的解决方案与jQuery或什么？我不想与职位等我需要动态添加它，例如点击以后如何将图像放在另一个上

来源

2015-09-07 Helloitsme

你会'与职位斗争'这种或那种方式... – sinisake

所以你不想“与职位争夺”，但你很乐意使用jQuery？职位有什么问题......他们比JQ更容易？ –

我忘了提及它需要以动态的方式添加。 – Helloitsme

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

来源

2015-09-07 13:56:38

这就是一些想法。谢谢！ – Helloitsme

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

来源

2015-09-07 13:59:42

谢谢，但我必须以动态的方式做到这一点 – Helloitsme

以何种方式'动态'？ –

这是如何在点击上动态添加图片的。希望它有助于

$("#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" />

来源

2015-09-07 14:06:26

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

加入滤波器：α（不透明度= 60），用于IE8或更早的浏览器

只是改变背景属性到一个图像链接

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

来源

2015-09-07 14:14:39 tmvnty

如何将图像放在另一个上

回答

相关问题