通过具有背景颜色的 div 实现透明度答案

【问题标题】：Transparency through a div with background color通过具有背景颜色的 div 实现透明度
【发布时间】：2013-07-26 22:02:44
【问题描述】：

我的透明效果有一个特殊问题。由于我在身体背景上有一个背景图像，我希望它在每个白色区域都显示为不透明。问题是，如果我的元素（在本例中为输入字段）有一个具有背景颜色的父元素，则它不起作用。由于我不知道如何用谷歌搜索这个问题，我希望这里有人可以帮我一把。

所以我会给你一个简单的示例页面来告诉你我的问题：

<body style="background: url(./images/background.png) no-repeat center top fixed; background-color: #FFFFFF; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div style="height:300px;  opacity: 0.95;">
    <input type="text" value="test" style="height:200px; width: 100%">
</div>
<div style="background-color:yellow; height:300px;">
    <input type="text" value="test" style="height:200px; width: 100%; opacity: 0.95;">
</div>

这是页面的截图 http://haraldegger.com/show.png

提前感谢您的帮助，祝您有美好的一天。

【问题讨论】：

这是因为您需要具有 background-color: yellow; 的 DIV 的透明度；
感谢您的帮助。我知道当我将 div 设置为透明时它会起作用，但问题是我希望只在输入字段内具有透明度，而不是在外部 div 上。
background-color:transparent 而不是不透明度（否则你的文字也会是透明的）
也没有解决我的问题，因为父div的背景是循环的，所以输入框变成黄色
看热门stackoverflow.com/questions/806000/…

标签： html css transparency opacity

【解决方案1】：

我不推荐使用内联样式，但是一个让输入字段透明的例子：

<input type="text" style="background:transparent">

所有浏览器中其他元素不透明度的 CSS 是：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

【讨论】：

首先：感谢您的帮助。我发布的代码 sn-p 尽可能短。当然，我还为旧版浏览器使用了其他不透明度定义。您为我的问题提出的解决方案的问题是 background:transparent 使输入字段变黄，这是由父背景颜色引起的。我试图达到的是跳过父元素的样式。