背景圖片設置

精確控制背景圖片在元素中的位置

可以把圖片設置為元素的背景,而且也能讓它鋪滿或者不鋪滿,那么我們同時也能將圖片放到一個固定的位置。
需要通過background-position用來精確控制背景 圖片在元素中的位置。
通過三種方式來確定圖片在水平方向 和垂直方向的起點。

關鍵字:top right bottom left center
百分比
數值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景與偏移量</title>
<style>
    .box1{
        width: 1072px;
        height: 560px;
        background-color: red;
        margin: 0 auto;
        background-image: url(img/002.jpg);
        background-repeat: no-repeat;
        /*可以通過數值來指定相對位置*/
        background-position: 50px 50px;
        /*通過關鍵字來設置方向*/
        /*background-position: bottom right;*/
        /*background-position: left;*/
        /*通過設置頁面的百分比來指定位置*/
        /*background-position: 50% 50%;*/
    }
</style>
</head>
  <body>
<div class="box1"></div>
    </body>
              </html>

注意寫對圖片的路徑,不然圖片無法顯示。
背景圖片的固定
通過背景圖片的固定,我們也能實現猶如網站的購物車圖標,不會隨著屏幕的滾動而變化。在設置背景圖片的時候,最好是設置在<body>內,這樣不會因為其他元素的滾動而消失。
CSS Sprite
CSS Sprites是一種網頁圖片應用處理方式。
好處:
通過這種方式我們可以將網頁中的零星圖片集中放到一張大圖上,這樣只需要網頁發送一次請求。
一次請求便可以同時加載多張圖片,大大提高了圖片的加載效率,提高了訪問效率。

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>按鈕</title>
  <style type="text/css">

    /*如果我們在不同的狀態時,傳入三張圖片,那么在點擊時會閃爍,而且瀏覽器請求次數增加,每次都得傳入圖片,增加傳輸速度。*/
    /*不寫圖片的位置的時候,就是傳入了固定的位置
    而且加載了三次,降低訪問次數,增加流量。
    */
    /*只寫圖片位置的時候,就是傳入了一張整合過得圖片
    通過移動圖片的位置來顯示我們所需要的樣子*/
    .btn:link{
        display: block;
        width: 93px;
        height: 29px;
        background-image:url(img/btn.png);
        background-repeat: no-repeat;
    }
    .btn:hover{
        background-position: -93px 0px;
        /*background-image: url(img/hover.png);*/
    }
    .btn:active{
        background-position: -186px 0px;
        /*background-image: url(img/active.png);*/
    }
  </style>
</head>
<body>
  <a href='#' class="btn"></a>
</body>
</html>

上面代碼中,要么寫圖片路徑在hover 和 acitve中不寫位移,那這就是傳入三次圖片,要么就是不寫路徑,通過傳入一張整合以后的圖片,來進行移動,實現我們想要看到的效果。提交加載速度。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 精確控制背景圖片在元素中的位置 可以把圖片設置為元素的背景,而且也能讓它鋪滿或者不鋪滿,那么我們同時也能將圖片放到...
    幸而0407閱讀 394評論 0 0
  • Next-Mist 主題最上面一欄的默認背景是灰色的,略微有些淡。想要更換這張圖片可按以下步驟操作。效果 Yeur...
    Yeureka閱讀 5,423評論 5 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 在wxss里設置背景為本地圖片是不可以的,會報錯:“本地資源圖片無法通過 WXSS 獲取,可以使用網絡圖片,或者 ...
    L_18a7閱讀 31,807評論 0 2
  • 最近新上項目,獨立開發,在整個過程中遇見不少坑,我會慢慢整理 tabBar設置背景圖片時候,需要設置默認圖片和選擇...
    coder也愛詩閱讀 2,230評論 0 0