如何在HTML中使图片透明？

Question

我有一个html文件，想要插入一张透明的图片。目前我的做法是先放置图片，等待其加载完成后再加载文本和其他图片。请问如何在html中添加透明图片？

这是我当前的代码：

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

- petko_stankoski

Answer 1

尝试使用 opacity 属性（对于IE，还需要使用 filter 属性）。

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

现在，我理解了你的问题，答案大致如下：

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

- Martin Borthiry

---

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

所以，我不明白你的问题。在HTML中，不透明度是制作图像透明的方法。 - Martin Borthiry

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

所以，您的问题是其他。尝试做这样的事情：<div style="background:url(image.jpg)"> 这里放内容 </div> - Martin Borthiry

真不敢相信没有其他人给一个被认可的回答点赞，这个回答经历了两次迭代才理解清楚问题。实际上，这个问题与透明度毫无关系。 - Stewart

Answer 2

以下是如何使其透明的方法，将此代码粘贴到您的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; 使光标在所有或几乎所有浏览器上保持指针状态。

希望这可以帮助您！

- A guy

Answer 3

使用CSS属性opacity或者在图像编辑器中将PNG图片设置为透明。

- pamojarpan

Answer 4

如果你想让图片作为背景，应该使用以下HTML代码：

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

CSS

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

- MCSI