HTML PNG 图像透明
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17729433/
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
HTML PNG image transparent
提问by IdeoREX
I'm trying to put a png image in the body of my html. The challenge is that my background is grey (for now, but could change) and the png background that is supposed to be transparent is white. How do I tell html to see the image as a png and not a regular image? Can I set it to transparent or do I have to specify a background color (transparent would be ideal if I change my background)?
我正在尝试将 png 图像放入我的 html 正文中。挑战在于我的背景是灰色的(目前,但可能会改变),而本应透明的 png 背景是白色的。如何告诉 html 将图像视为 png 而不是常规图像?我可以将它设置为透明还是必须指定背景颜色(如果我更改背景,透明将是理想的选择)?
My code is currently
我的代码目前是
<img src="{% static 'livestream/images/streamON.png' %}" alt="on" width="300" height="300">
回答by nullability
Transparency is not done in HTML, but is a part of the image itself. The browser will see the image as a PNG and display it as a PNG automatically. To add transparency to the image, you will have to edit the file with a graphics editor like Photoshop.
透明度不是在 HTML 中完成的,而是图像本身的一部分。浏览器会将图像视为 PNG 并自动将其显示为 PNG。要为图像添加透明度,您必须使用 Photoshop 等图形编辑器编辑文件。
回答by sergio.s
Use Photoshop, Fireworks (or any other image editing software) to remove the background of the PNG. When saving, you should mark it as having "transparency".
使用 Photoshop、Fireworks(或任何其他图像编辑软件)删除 PNG 的背景。保存时,应将其标记为具有“透明度”。
This question has nothing to do with HTML though.
不过,这个问题与 HTML 无关。
回答by Pravin Waychal
you need to use transparent image. which can be created by using photoshop or any other image editing software
您需要使用透明图像。可以使用photoshop或任何其他图像编辑软件创建
http://i.stack.imgur.com/sCNJW.png
http://i.stack.imgur.com/sCNJW.png
or you can use css transparency as shown in below link
或者您可以使用 css 透明度,如下面的链接所示
http://css-tricks.com/css-transparency-settings-for-all-broswers/
http://css-tricks.com/css-transparency-settings-for-all-broswers/