CSS實現登陸頁面透明度的樣本　

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前幾天想著練練透明度，結果從此踏上了各種不歸路。

先簡單的扯兩句透明度吧：
background: rgba(255, 255, 255, 0.3);

這裡的最後一個就是透明度啦，滿值為1，表示不透明 0代表完全透明。

透明度問題輕鬆解決，然後試圖將button和inputbox調整為同一大小的時候卻遇到了問題，為了美觀，我在inputbox內設定了padding，試圖將文字向右靠一些，以起到美觀的作用，結果padding卻不算在width內，換言之，你可能需要計算來得出你要的寬度，但這明顯違背了百分比定位的原則。

關於此，可以再這裡看到：盒模型-學習CSS布局

之後師匠在我的苦求之下給我寫了一個樣本發給我：登陸頁面

順勢讀了一下發現了不少好貨：box-sizing: border-box;，這一點就可以解決我們計算寬度的問題，在w3school和FF出的布局教程中均有記錄。

border-box:

為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

如果需要取消的話，使用unset即可（或者說content-box）。

然後說說關於transform，transform是CSS3，但就表現力而言，卻不僅僅是定位，可以看到，他還能旋轉，xyz三個方向都可以呢，可神奇了。

transform: translateY(-38.2%);這句話就是Y軸向上38.2%（相對自己），transform可??/p>

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登入頁面</title>
<style type="text/css">
  html, body {
   margin: 0 auto;
   padding: 0;
   height: 100%;
  }

  body {
   background-image: url('bg.jpg');
  }

  .container.duel {
   width: 100%;
   height: 100%;
   /*background: rgba(255, 255, 255, 0.2);
*/  }

  .container {
   margin: 0 auto;
   padding: 0;
  }

  h1 {
   margin: 0 auto;
   padding: 0;
  }

  .input-box-line {
   margin: 20px auto;
   padding: 100px;
   width: 15%;
/*   border: 2px solid #fff;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0.2);*/
  }

  .input-box-line>h1 {
   margin-top: -20px;
   margin-bottom: 20px;
   text-align: center;
   font-family: 'Microsoft Yahei';
  }

  input[type=text], input[type=password] {
   color: #fff;
   font-family: 'Microsoft Yahei Light';
   margin: 5px auto;
/*   padding-left: 20px;
*/   display: block;
   border: 1px solid #fff;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0);
   height: 40px;
   width: 100%;
  }

  input[type=button], input[type=submit] {
   color: #fff;
   font-family: 'Microsoft Yahei Light';
   margin: 5px auto;
   display: block;
   border: 1px solid #fff;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0);
   height: 40px;
   width: 100%;
  }

  input[type=button]:hover, input[type=submit]:hover {
   background: rgba(255, 255, 255, 0.3);
  }
</style>
</head>
<body>
<div class="container duel">
  <div class="input-box-line">
   <input type="text" name="usrname" placeholder="使用者名稱">
   <input type="password" name="password" placeholder="密碼">
   <input type="submit" value="登入">
   <input type="button" value="註冊">
  </div>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More