Question

我的透明效果有一个特殊问题。由于我在身体背景上有背景图像，我希望它通过每个白色区域显示不透明度。问题是如果我的元素（在这种情况下是输入字段）具有背景颜色的父元素，它就不起作用。由于我不知道如何谷歌这个问题，我希望有人在这里可以帮助我。

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

<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

提前感谢您的帮助，祝您度过愉快的一天。

Answer 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;

透明度通过背景颜色的div

1 个答案: