你知道如何使img標籤的源圖像透明，以便人們可以通過src圖像看到背景圖像嗎？透明src使背景顯示通過
說我有這個網站：
<img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" />
我想以某種方式目標的源圖像，並設置不透明度爲i.ex. 0.7。
使用jQuery我可以在標記複製圖像的src，高度和寬度，操縱弄成這個樣子：
<div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;">
<div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"></div>
</div>
但沒有任何人有如何做到做到這一點更好/更簡單的建議？最好不要操縱標記。
我不認爲你可以只用<img/>做到這一點。試試：
<div class="image-wrapper">
<img src="my_image.jpg" height="200" width="300"/>
</div>
.image-wrapper {
display: inline-block;
background: url(img/bg.jpg) repeat;
}
.image-wrapper img {
vertical-align: top;
opacity: 0.7;
}
和fiddle。
當然，我不能單獨使用img標籤來完成。這看起來不錯！謝謝 ：） – Spoeken 2011-12-21 04:25:55
您可以嘗試在<span></span>中包裝圖像並設置背景，然後降低圖像的透明度。它不會比用div替換圖片更尷尬。
你甚至讀過整篇文章嗎？ – Spoeken 2011-12-21 03:42:24
@MathiasMadsenStav是的，我做到了。你必須操縱標記。您假設圖像的來源和圖像元素是分開的;他們不是。 – Mathletics 2011-12-21 14:18:10
你解釋的正是我在我的問題中提供的例子。但嘿，謝謝你的嘗試:) – Spoeken 2011-12-22 12:36:49
你可以在div中而不是背景圖像，然後改變z-index，然後你可以直接在css中定位它。
我不認爲你能理解我寫的所有內容。增加了一些我的問題。 – Spoeken 2011-12-21 03:41:03
爲什麼不在編輯器中使圖像部分透明，然後另存爲PNG（因爲JPG不支持透明度）？這比試圖編寫解決方案要容易得多。
原因是效率不高，然後上傳照片的用戶必須知道如何完成。 – Spoeken 2011-12-21 03:29:10
只需要三十秒就可以編寫一個PHP腳本，使圖像部分透明... – 2011-12-21 13:52:05
圖像無法獨立於背景變得透明。你爲什麼要這樣做？ – Mathletics 2011-12-20 21:27:44
你完全確定嗎？有一些使用JavaScript處理圖像的方法。我想這樣做的原因是讓它看起來像圖像有紋理。 – Spoeken 2011-12-21 03:38:08