Html CSS學習（六）background-position背景圖像的定位

時間 2019-11-10

標籤 html css 學習 background position 背景圖像定位欄目 HTML 简体版

原文原文鏈接

Html CSS學習（六）background-position背景圖像的定位

在網頁中，會有不少的背景圖像與一些小的圖標等內容，在初學的時候，爲了達到頁面的效果，都是將原圖切割成不少個獨立的文件，這樣，將會有幾十個圖像文件，在網頁加載的時候，會與服務器進行幾十次的交互，極其浪費資源，影響網頁打開的速度，因些，實際的作法一般是將這些圖像放在一個文件中，利用定位技術進行定位實現。在對背景處理時，主要用到了background-position這個屬性。css

1、背景的相關屬性

background-image:背景圖像 html

none：無背景圖。
<url>：使用絕對或相對地址指定背景圖像。
<linear-gradient>：使用線性漸變建立背景圖像。（CSS3）
<radial-gradient>：使用徑向(放射性)漸變建立背景圖像。（CSS3）
<repeating-linear-gradient>：使用重複的線性漸變建立背景圖像。（CSS3）
<repeating-radial-gradient>：使用重複的徑向(放射性)漸變建立背景圖像。（CSS3）

background-color:設置背景顏色服務器

background-repeat:設置背景圖像如何鋪排填充學習

background-attachment:設置背景圖像是隨着對象內容滾動仍是固定ui

background-position:設置背景圖像的位置url

background-position：<position> [ , <position> ]spa

默認背景圖像的位置是從元素的左上角爲原點顯示的，也就是說，元素左上角的座標是[0,0]，背景圖像的左上角默認與無素的左上角對齊。其中position的值能夠是top、left、center、right、bottom等，若是兩個position只指定一個，則第二個默認爲center。這兩個position就是其x軸和y軸座標值，也能夠指定爲百分比，還能夠指定爲像素值。code

background-clip:指定背景繪製區域htm

border-box:默認值，背景繪製在邊框方框內（剪切成邊框方框）
padding-box:背景繪製在襯距方框內（剪切成襯距方框）
content-box:背景繪製在內容方框內（剪切成內容方框）

background-origin:指定background-position屬性應該是相對位置，若是背景圖像background-attachment是「固定」，這個屬性沒有任何效果。對象

padding-box:背景圖像填充框的相對位置
border-box:背景圖像邊界框的相對位置
content-box:背景圖像的相對位置的內容框

2、背景圖像實例

1.頁面代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景圖像定位</title>
    <style>
        a{
            display: block;
            width: 436px;
            height: 163px;
            border: 1px solid black;
            line-height: 163px;
            text-align: center;
            background-image: url("images/btn_bg_1.jpg");
        }
        a:hover{
            background-position:right;
            background-image: url("images/btn_bg_1.jpg");
        }
    </style>
</head>
<body>
    <div class="father">
        <a href="">
            這是超連接
        </a>
    </div>
</body>
</html>

2.頁面效果

3.背景圖像

a:hover{
            background-position:right;
            background-image: url("images/btn_bg_1.jpg");
        }

當鼠標指向超連接時，其background-position:right;其只設置了X軸的位置爲右對齊，並無設置Y軸的位置，因此Y軸的位置是默認值爲center，最終顯示的是整個圖像中右邊中間的那個。

相關標籤/搜索

每日一句

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