html - 如何设置输入的背景透明度？

Question

input[type="text"], input[type="password"]{
    opacity:0.5;
}

这会淡化输入主体和边框。我不希望边框透明，只希望主体透明，所以底层图像是可见的。当然，输入中的用户文本不应该是透明的。

input [type="submit"]{
    margin-left:50px;  // here nothing works at all.
}

Answer 1

opacity 属性影响整个元素的不透明度。你的问题有点含糊，但我假设你想要一个半透明的背景，而内容和边框不应该是透明的。

为此，您需要为元素设置半透明背景。这称为 alpha 透明度，因为第四个颜色 channel - alpha channel - 用于存储透明度信息(通常在 PNG 等图像中)。

在现代浏览器中，您可以为 background 属性使用 rgba() 值:

/* semi-transparent white background */
background: rgba( 255, 255, 255, .5 );

在 MS IE 中，您可以使用渐变滤镜，它从 MS IE 5 开始支持 ARGB 颜色。只需从颜色淡入淡出:(请注意，alpha channel 首先出现，所有四个颜色值都被标记为两个-数字十六进制)

/* the same for IE 7+8, should get included in a separate MS IE specific stylesheet */
background: none;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );