Html 如何使html中的图像透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8151156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make image in html transparent?
提问by petko_stankoski
I have a html file and I want to put an image in. The image should be transparent. The way I am doing now - first comes the image, and after it finishes, there comes the text and the other images. How to add transparent image in html? This is my code now:
我有一个 html 文件，我想放入一个图像。图像应该是透明的。我现在正在做的方式 - 首先出现图像，完成后，出现文本和其他图像。如何在html中添加透明图像？这是我现在的代码：
<img src="result_files\image003.png" alt="some_text"/>
回答by Martin Borthiry
Try using opacity (and filter for IE)
尝试使用不透明度（并过滤 IE）
<img src="result_files\image003.png" alt="some_text" style="opacity:0.4;filter:alpha(opacity=40);"/>
Now, I understand your question, the answer is something like this:
现在，我明白你的问题了，答案是这样的：
<div style="background:url(image.jpg)"> the content here </div>
回答by pamojarpan
Use CSS property opacity or just make the png transparent in an image editor.
使用 CSS 属性 opacity 或仅在图像编辑器中使 png 透明。
回答by MCSI
if you want the image be the background, should be
如果你想让图像成为背景，应该是
HTML
HTML
<div class="content">
...content...
</div>
CSS
CSS
.content {
background-image:url('imageurl.jpg');
}
回答by A guy
Here's how to make it transparent, paste this into your javascript and edit as you please.
这是使其透明的方法，将其粘贴到您的 javascript 中并根据需要进行编辑。
<a href="http://www.hlgjyl888.com/data/wallpapers/30/WDF_780770.png"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="http://www.hlgjyl888.com/data/wallpapers/30/WDF_780770.png" style="position:fixed; right:10px; bottom:20px; width:80px; height:80px; border:none; cursor:pointer; background:none;"></a>
<script>
function bigImg(x) {
x.style.height = "120px";
x.style.width = "120px";
x.style.opacity = "0.2";
}
function normalImg(x) {
x.style.height = "80px";
x.style.width = "80px";
x.style.opacity = "100";
}
</script>x.style.opacitytells the browser to set the opacity, if copying this to your document there are a few more things you should know...
x.style.opacity告诉浏览器设置不透明度，如果将其复制到您的文档中，还有一些您应该知道的事情......
style="position:fixed; right:10px; bottom:20px;Positions it at bottom right of page.
style="position:fixed; right:10px; bottom:20px;将其定位在页面的右下角。
cursor:pointer;Makes the cursor stay pointer on all or almost all browsers.
cursor:pointer;使光标停留在所有或几乎所有浏览器上的指针。
Hope this helps you!
希望这对你有帮助！
