如何在输入框内显示封面图像，使输入栏透明？

我有一个页面有一个背景封面图片，我的输入框只有边框底部，问题是输入字段现在显示白色作为背景，看起来不好，我想使他们透明采取封面背景，如何做到这一点请帮忙？如何在输入框内显示封面图像，使输入栏透明？

这里是我的代码的login.html文件：

<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body class="body"> 

      <form name="form" ng-submit="login()" role="form"> 
      <div class="list-inset"> 
       <div class="login-div-outer"> 
         <input type="text" name="username" id="username" placeholder="USERNAME" ng-model="data.username" class=" m-item" required> 
       </div> 

       <div class="login-div-outer"> 
         <input type="password" name="password" id="password" placeholder="PASSWORD" ng-model="data.password" class=" m-item" required > 
       </div> 

      </div> 
      </form> 

       <button class="button button-full m-login-btn" type="submit" ng-disabled="form.$invalid" ng-click="login()" eat-click-if="!checkNetwork(true)"> 
     login 
       </button> 

    </body> 

</html> 



css that i have tried : 

    .body{ 
     background-image: url('https://images.blogthings.com/thecolorfulpatterntest/pattern-1.png'); 
     background-size: cover; 

    } 

    .m-item{ 
     width: 93%; 
     border: none !important; 
     border-bottom: 1px solid grey !important; 
     /* background-color: rgba(0, 0, 0, 0); */ 
     outline: none!important; 
     margin-left: 10px; 
     margin-right: 10px; 
     margin-bottom: 25px; 
     /* background: transparent; */ 
     font-size: 16px !important; 
    }

我添加了一个链接plunker例如：

 https://plnkr.co/edit/auDZZJrqx6b6iv4MvU1p?p=preview 

what i want to do is input should also show the background image so that when the background image is light in color white color should not get shown as it does'nt looks good

来源

2016-02-29 Anky

只需添加下面的CSS中的.m项{}类

.m-item { background: transparent none repeat scroll 0 0; }

来源

2016-02-29 06:32:12

如何在输入框内显示封面图像，使输入栏透明？

回答

相关问题