当文本字段背景不透明时，如何使输入占位符文本不透明

Question

我有一个输入文本字段，它的值为 { opacity: 0.2; } 并且在黑白图像之上具有白色背景颜色 (#ffffff)。文本字段的不透明度正确并且看起来很棒。但我希望占位符文本为白色，并且不受输入字段不透明度的影响。我已经尝试查找如何设置占位符文本的样式，但它似乎仍然受到元素不透明度的影响。我该怎么做？

CSS供参考...

html, body {
padding:0;
margin: 0;
background-color:#222222;
}

.notifyEmail input[type="text"] {
display:block;
margin: 0 auto;
margin-bottom: 10px;
background-color:#ffffff;
color: white;
padding-right:30px;
font-family:inherit;
text-transform:uppercase;
font-size:14px;
height:50px;
width:540px;
opacity:0.2;
}

非常感谢！

Answer 1

尝试将您的第二个 class 更改为此。这将以 rgba 格式指定您的背景颜色并删除不透明度属性：

.notifyEmail input[type="text"] {
      display:block;
      margin: 0 auto 10px 0;
      padding-right: 30px;
      background-color: rgba(255,255,255,0.2);
      font-family:inherit;
      text-transform:uppercase;
      font-size: 14px;
      height: 50px;
      width: 540px;
}

然后添加这些 classes:

.notifyEmail::-webkit-input-placeholder
{
      color: rgba(255,255,255,1.0);  
}

.notifyEmail::-moz-placeholder
{
      color: rgba(255,255,255,1.0);  
}

.notifyEmail:-ms-input-placeholder
{
      color: rgba(255,255,255,1.0);  
}

当文本字段背景不透明时，如何使输入占位符文本不透明

How to make input placeholder text not opaque when the text field background is opaque

html

css

input

colors

opacity