Question

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

这会消失 - 输入身体和边界。我不希望边框透明，只是正文，因此底层图像是可见的。当然，输入中的用户文本不应该是透明的。

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

Answer 1

不透明度适用于整个文本输入，包括其中的文本。所以你的代码不起作用。

Answer 2

选项 1 ）您可以使用 CSS3 吗？如果是这样，请使用（当然，使用您想要的颜色）：

background-color: rgba(255,0,0,0.5);

选项 2 ）您可以将输入的背景设置为您想要查看的图像。

选项 3 ）您可以将背景设置为半透明纯色图像（。gif / .png，其大小可以是1x1，在X中重复和Y）。

Answer 3

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

为此，您需要为元素设置半透明背景。这称为alpha透明度，作为第四个颜色通道 - alpha通道 - 用于存储透明度信息（通常在像PNG这样的图像中）。

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

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

在MS IE中你可以使用渐变滤镜，它支持自IE IE 5以来的ARGB颜色。只是从颜色渐变到自身:(请注意，alpha通道首先出现，所有四个颜色值都记为两个 - 数字十六进制）

/* 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 );

Answer 4

对于提交，您需要get rid of the space in your selector：

input[type="submit"]{
  margin-left:50px; 
}

并且您无法使用opacity指定要使透明元素的哪些部分透明。它适用于err'thang。可能存在各种各样的“黑客”来实现你想要的东西，例如使用包装div来创建边框。

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

4 个答案: