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格式指定背景颜色并删除不透明度属性：

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

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

1 个答案: