Html 如何使输入文本栏透明,但保持文本内部为实心?
有没有一种方法可以使输入文本条透明,但保持条内的文本为纯色? 我遇到的问题是,通过设置条的不透明度,它还可以调整文本的不透明度 我需要的文本是纯白的,否则它不会从输入栏和包含它的标题颜色中脱颖而出 HTML:Html 如何使输入文本栏透明,但保持文本内部为实心?,html,css,input,text,opacity,Html,Css,Input,Text,Opacity,有没有一种方法可以使输入文本条透明,但保持条内的文本为纯色? 我遇到的问题是,通过设置条的不透明度,它还可以调整文本的不透明度 我需要的文本是纯白的,否则它不会从输入栏和包含它的标题颜色中脱颖而出 HTML: 事实上,我是能够弄明白的。 如果其他人也有这个问题,我通过使用“background:rgba(255,255,255,0.3);”来修复它,使输入栏透明。由于文本不受影响,您只需使用“颜色:”设置文本颜色即可 CSS: 您称之为“输入文本栏”的是什么? <html lang="en
事实上,我是能够弄明白的。 如果其他人也有这个问题,我通过使用“background:rgba(255,255,255,0.3);”来修复它,使输入栏透明。由于文本不受影响,您只需使用“颜色:”设置文本颜色即可 CSS: 您称之为“输入文本栏”的是什么?
<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>
#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;
}
#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;
}