输入框的透明度影响placeholder的透明度怎么解决

在这里插入图片描述
有一个需求是需要写如上图所示的输入框。
首先想到的是调整输入的透明度

<div class="inputDiv"><img src="./images/search.png" /><input type="text" class="myInput" placeholder="请输入标题关键字"/>
</div>

.inputDiv{border-radius: 16px;height:3.2rem;width:32rem;margin-top:0.7rem;display: flex;align-items: center;padding-left:0.9rem;
}
.myInput{height:3.2rem;opacity: 0.24;padding:0;padding-inline:0;padding-block:0;border-width:0;width:27.5rem;font-size: 1.4rem;color: #FFFFFF ;
}
.myInput::placeholder {color: #FFD6B5 ;font-size: 1.4rem;line-height: 3.2rem;text-align: center;
}

在这里插入图片描述
这样会发现placeholder的透明度也会被输入框的透明度影响

如果把透明度放在background-color中实现就会没有这个烦恼了
最终实现方案

.inputDiv{background-color: rgba(255, 255, 255, 0.24);border-radius: 16px;height:3.2rem;width:32rem;margin-top:0.7rem;display: flex;align-items: center;padding-left:0.9rem;
}
.inputDiv img {width:1.8rem;height:1.8rem;
}
.myInput{height:3.2rem;background-color: rgba(255, 255, 255, 0);padding:0;padding-inline:0;padding-block:0;border-width:0;width:27.5rem;font-size: 1.4rem;color: #FFFFFF ;
}
.myInput::placeholder {color: #FFD6B5 ;font-size: 1.4rem;line-height: 3.2rem;text-align: center;
}