如何在輸入框內顯示封面圖像，使輸入欄透明？

我有一個頁面有一個背景封面圖片，我的輸入框只有邊框底部，問題是輸入字段現在顯示白色作爲背景，看起來不好，我想使他們透明採取封面背景，如何做到這一點請幫忙？如何在輸入框內顯示封面圖像，使輸入欄透明？

這裏是我的代碼的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

如何在輸入框內顯示封面圖像，使輸入欄透明？

回答

相關問題