css背景圖片定位練習（一）

時間 2019-11-18

標籤 css 背景圖片定位練習欄目 CSS 简体版

原文原文鏈接

首先準備一張雪碧圖，Like thisphp

背景圖片的定位方法有3種，比較經常使用的兩種爲css

關鍵字：background-position: top left;   (top/bottom/cennter/left/right)
像素：background-position: 水平移動px 垂直移動px;

關鍵詞：html

其中關鍵字方法background-position: top left 和left top效果是同樣的。（注意：若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。）this

關於像素值的正負：負數方向爲左/上，同理正數方向爲右/下url

他們背景定位的原點都是在左上角，若是能理解下面的代碼，說明上面兩種方法已經合格了spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位練習</title>
    
</head>
<body>
<style rel="stylesheet" type="text/css">
.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {
float: left;
width:100px;
height: 100px;
background: #666 url(18.png) no-repeat;
margin-left: 10px;
}

.box1{background-position: -300px 0;}
.box2{background-position: -200px 0;}
.box3{background-position: -100px 0;}
.box4{background-position:top left;}
.box5{background-position: 0 -100px;}
.box6{background-position: 0 -200px;}
.box7{background-position:bottom left;}
.box8{background-position:-300px -200px;}
.box9{background-position:bottom right;}

    </style>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>
</body>
</html>

預覽效果爲：code

須要注意的是：在repeat的狀態下和默認的狀態下（默認即爲repeat）,background-position是不起做用的!htm

下一節咱們繼續講定位的第三種方法:blog

百分比：background-position: 0% 0%;