html - 使div透明但不透明内部图像

标签 html css image background

我想要一个内部有图像的 div,但 div 和背景是完全透明的,给人的印象是图像单独存在,div 背景后面的元素出现。

我尝试过以多种方式使用 rgba,例如 background: rgba(204, 204, 204, 0.5); 但所有这些最终都会在设置时在 div 上留下白色背景到完全透明。

我该如何实现?

编辑 这是一张照片: This is a crop of the UI screen. The red button is the image and the white is the div backgroud.

如何让红色按钮正常显示,但又能看到白色部分后面的内容?

我的 HTML 是这样的:

<div id="transparent-background">
    <img src="./images/ui/chat.gif" class="arrow-button"/>
</div>

谢谢,

最佳答案

只需将此 CSS 用于您的 DIV:

#transparent-background {
  background: transparent;
}

关于html - 使div透明但不透明内部图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44893567/

相关文章:

html - CSS - 协调背景位置动画

html - css height, max-height, line-height VS.垂直对齐

javascript - 通过覆盖默认相机增强 HTML5 拍照功能

javascript - Chrome 扩展中的持久化 iFrame

html - 如何在 Bootstrap 中将两个元素添加到一行中?

android - android中图像/图片/jpg的日期问题(DATE_TAKEN)

image - 将 matlab.graphics.primitive.Image (imagesc 的输出)转换为 rgb 数组

php - 在 PHP 中从 mysql 检索图像时无法查看图像

javascript - 使下拉列表在 Bootstrap 响应表中可见

css - 不要移动其他内容 CSS