如何將圖像放在另一個上

-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

如何將圖像放在另一個上

回答

相關問題