时间戳

首页 > 解决方案 > 如何使输入文本栏透明但将文本保持在实体内部？

html - 如何使输入文本栏透明但将文本保持在实体内部？

问题描述

有没有办法使输入文本栏透明但保持栏内的文本为纯色？我遇到的问题是，通过设置条形不透明度，它也调整了文本的不透明度。

我需要文本为纯白色，否则它不会从输入栏和包含它的标题的颜色中脱颖而出。

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

标签： htmlcssinputtextopacity

解决方案

我实际上能够弄清楚。万一其他人有这个问题，我使用“背景：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;
}

推荐阅读