如何使html中的图像透明？

Posted 2023-03-05

【中文标题】如何使html中的图像透明？

【英文标题】：How to make image in html transparent?

【发布时间】：2011-12-30 08:55:03

【问题描述】：

我有一个 html 文件，我想放一张图片。图片应该是透明的。我现在正在做的方式 - 首先是图像，完成后是文本和其他图像。如何在html中添加透明图像？ 这是我现在的代码：

<img src="result_files\image003.png" />

【参考方案1】：

使用 CSS 属性 opacity 或仅在图像编辑器中使 png 透明。

【参考方案2】：

尝试使用opacity（IE 使用filter）。

<img src="result_files\image003.png"  style="opacity:0.4;filter:alpha(opacity=40);"/>

现在，我明白了你的问题，答案是这样的：

 <div style="background:url(image.jpg)"> the content here </div>

【讨论】：

这只会使图像更亮。我想让它可见，但要在上面放置图像/文本。

所以，我不明白你的问题。不透明度是使图像在 html 中透明的方法。

但我希望图像成为内容的某种背景。

所以，你的问题是其他的。尝试这样做：这里的内容

不敢相信没有人支持一个接受的答案，这需要 2 次迭代来理解这个问题。这个问题实际上与透明度无关。

【参考方案3】：

如果你想让图片成为背景，应该是

HTML

<div class="content">
...content...
</div>

CSS

.content 
background-image:url('imageurl.jpg');

【参考方案4】：

这是使它透明的方法，将其粘贴到您的 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.opacity 告诉浏览器设置不透明度，如果将其复制到您的文档中，您应该知道更多的事情......

style="position:fixed; right:10px; bottom:20px; 定位在页面的右下角。

cursor:pointer; 使光标停留在所有或几乎所有浏览器上。

希望对您有所帮助！