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

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

尝试将您的第二节课改为这个。这会以 rgba 格式指定您的背景颜色并删除 opacity 属性：

.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;
}

然后添加这些类：

.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);  
}