有没有办法让输入文本栏透明，但让栏内的文本保持纯色？ 我遇到的问题是，通过设置栏的不透明度，它也会调整文本的不透明度。
我需要文本为纯白色，否则它不会从输入栏和包含它的标题的颜色中脱颖而出。
HTML:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button"><img src="./img/additem.png"></button>
</header>
<div id="list">
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
CSS:
#input{
width:100%;
height:40px;
border:0;
opacity:0.6;
color:rgba(255, 255, 255, 0.9);
text-indent: 20px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
最佳答案
其实我是想通了。 如果其他人遇到此问题，我使用“背景:rgba(255, 255, 255, 0.3);”修复了它只使输入栏透明。由于文本不受影响，您通常只需使用“颜色:”设置文本颜色即可。
CSS:
#input{
width:100%;
height:40px;
border:0;
background: rgba(255, 255, 255, 0.3);
color: #FFFFFF;
text-indent: 20px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
关于html - 如何使输入文本栏透明但保持文本在里面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58315237/