css切背景圖片（background-position）

時間 2019-11-16

標籤 css 背景圖片 background position 欄目 CSS 简体版

原文原文鏈接

給元素添加背景圖片的方式有不少，我的總結的有：css

用img插入圖片；html

css3的方式手動繪圖；css3

單獨用background-image單獨插入圖片；url

其中用background-image有兩種方法，一種是採用的單一照片來設置，另外一種就是採用一張整圖來切：spa

會用到的屬性有：3d

background-positon:x軸起點 y軸起點；
background-size:背景圖片的大小；
width：終點x軸位置；
height：終點y軸位置；

例如：code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img-total {
            cursor: pointer;//定義鼠標移入樣式
            width: 30px;//x軸終點
            height: 30px;//y軸終點
            background-image: url(images/position.png);//圖片位置
            background-size: 120px 30px;//背景圖片大小
            display: inline-block;
        }

        .img-home {
            background-position: 0 0;//起點位置
            background-color: #23ccfe;
        }

        .img-favorite {
            background-position: -31px 0;
            background-color: #095f8a;
        }

        .img-cart {
            background-position: -61px 0;
            background-color: #1b961b;
        }

        .img-user {
            background-position: -91px 0;
            background-color: #94df94;
        }
    </style>
</head>
<body>
<div style="background-color: #f8f8f8; height:300px; padding-top:30px;">
    <span class="img-total img-home"></span>
    <span class="img-total img-favorite"></span>
    <span class="img-total img-cart"></span>
    <span class="img-total img-user"></span>
</div>
</body>
</html>