多圖形覆蓋

時間 2019-11-21

標籤圖形覆蓋简体版

原文原文鏈接

將所須要的網頁圖形放到一張上，經過進行部分遮蓋，留出所需圖形，這樣可減小請求時間，效率更高。html

原圖以下：url

代碼以下：htm

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多圖形</title>
    <style>
        .tp1{
            background-image: url("shopping_bg.png");
            float:left;
            width:114px;
            height:100px;
            background-repeat: no-repeat;

        }
        .tp2{
            background:url("shopping_bg.png");
            float:left;
            background-position: 10px -100px;
            width: 114px;
            height: 35px;
            background-repeat: no-repeat;

        }
        .tp3{
            background:url("shopping_bg.png");
            float:left;
            background-position: 10px -145px;
            width: 114px;
            height: 27px;
            background-repeat: no-repeat;

        }
        .tp4 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 20px -178px;
            width: 114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp5 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -223px;
            width: 114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp6 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -271px;
            width: 114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp7 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -321px;
            width:114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp8 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -376px;
            width:114px;
            height: 20px;
            background-repeat: no-repeat;

        }
    </style>
</head>
<body>
   <div class="tp1">

   </div>
   <div class="tp2">

   </div>
   <div class="tp3">

   </div>
   <div class="tp4">

   </div>
   <div class="tp5">

   </div>
   <div class="tp6">

   </div>
   <div class="tp7">

   </div>
   <div class="tp8">

   </div>
</body>
</html>

運行代碼後以下：

這樣作的結果可以讓每一個圖都置頂表現，全部上半部分被頂遮住，若想將圖移到其餘位置，可利用div進行設置。blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。