CSS零碎知識點（3）——居中頭像

二木成林發表於2020-11-14
CSS

初始框的程式碼為：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
        /* 居中0 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 居中1 */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="touxiang">
      	<img src="https://beta.pili.com.tw/img/role/640x741/yulongyinshi_1.jpg" alt="頭像">
      </div>
    </div>
  </body>
</html>

圖片太大了，比框還要大

設定touxiang盒子和img的CSS樣式

#app #touxiang {
  height: 130px; /* 設定包裹圖片盒子的高度 */
  width: 130px; /* 設定包裹圖片盒子的寬度，寬高相等是一個正方形盒子 */
  border: 1px solid #eee; /* 給包裹圖片盒子設定一些邊界 */
  border-radius: 50%; /* 把包裹圖片盒子設定一個圓形盒子 */
  padding: 10px; /* 設定內邊距 */
  box-shadow: 0 0 10px #ddd; /* 再設定點陰影 */
  background-color: #fff; /* 設定盒子的背景色 */
  /* 設定包裹圖片盒子的位置0 */
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  /* 設定包裹圖片盒子的位置1 */
}
#app #touxiang img {
  width: 100%;/* 設定背景圖片寬百分之百 */
  height: 100%;
  border-radius: 50%; /* 設定背景圖片也是圓形 */
  background: #eee;
}

一個漂亮的頭像完成了

完整程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
        /* 居中0 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 居中1 */
      }

      #app #touxiang {
        height: 130px;
        /* 設定包裹圖片盒子的高度 */
        width: 130px;
        /* 設定包裹圖片盒子的寬度，寬高相等是一個正方形盒子 */
        border: 1px solid #eee;
        /* 給包裹圖片盒子設定一些邊界 */
        border-radius: 50%;
        /* 把包裹圖片盒子設定一個圓形盒子 */
        padding: 10px;
        /* 設定內邊距 */
        box-shadow: 0 0 10px #ddd;
        /* 再設定點陰影 */
        background-color: #fff;
        /* 設定盒子的背景色 */
        /* 設定包裹圖片盒子的位置0 */
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 設定包裹圖片盒子的位置1 */
      }

      #app #touxiang img {
        width: 100%;
        /* 設定背景圖片寬百分之百 */
        height: 100%;
        border-radius: 50%;
        /* 設定背景圖片也是圓形 */
        background: #eee;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="touxiang">
        <img src="https://beta.pili.com.tw/img/role/640x741/yulongyinshi_1.jpg" alt="頭像">
      </div>
    </div>
  </body>
</html>

 

相關文章