HTML----元素層級

weixin_34185364發表於2018-08-14
HTML

元素的層級
內容已在程式碼

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>元素的層級</title>
   <style type="text/css">
       .box1{
           width: 200px;
           height: 200px;
           background-color: pink;
       }
       .box2{
           width: 200px;
           height: 200px;
           background-color: red;
           position: absolute;
           top: 100px;
           left: 100px;
           z-index: 1
       }
            /*z-index 設定z軸的層級*/
       .box3{
           width: 200px;
           height: 200px;
           background-color: blue;
           position: relative;
       }
           /*父元素的層級在高 也不會蓋著子元素*/
           /*opacity 設定元素的背景透明   0-1  0.5半透明*/
           /*ie8 級 以下不能設定透明  設定的話用 filter:alpha(opacity=50)  ie 專有的 最好兩個都寫上*/
   </style>
</head>
<body>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
</body>
</html>

背景
background-repeat 設定背景重複
background-position 設定圖片的位置:
top lefttop center top right center left center center center right
background-attachment 設定圖片 fixed 固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style type="text/css">
        .box1{
            width: 1000px;
            height:1000px;
            margin: 0 auto;
            background-color: pink;
            background-image:url(img/1.jpg);
            background-repeat: repeat-y;
        }
        /*background-repeat  設定背景重複*/
        /*background-position 設定圖片的位置，top left
        top center top right center left center center center right */
        /*background-attachment 設定圖片 fixed 固定*/
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>
/--簡寫背景屬性  background:#bfa url(img/1.png) no-repeat fixed center;--/

相關文章