溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css定位元素實現的背景圖像”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在上一篇文章中，小栗子里有我們要介紹的這個屬性，不知道你們還記不記得，不記得的回去看看。上篇文章主要是介紹background-origin這個屬性，所以就沒有說其他的了，今天我們著重介紹background-position這個屬性。
首先我們來看一個小栗子。
<style>
div{
background-image: url("images/3.jpg");
background-repeat:no-repeat;
background-position:left;
}
</style>
</head>
<body><div>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
<p>為了顯示，表明這個一個p元素</p>
</div>
</body>這個小例子的結果是
我們可以看到，當我們將“background-position:left;”的效果取消掉的時候，可以發現原來在下方的背景圖一下子就跑到頂部了。將“background-position:left;”的效果勾選上的時候，這個背景圖又跑回原位置了。看來background-position這個屬性才是背景圖移動的關鍵啊，那就看看這個屬性吧。
background-position屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由background-image定義）的位置，背景圖像如果要重復，將從這一點開始。
這個屬性的屬性值有點多，為了大家方便理解，我就直接發一個圖表，可以對著圖表去看。
當然這個屬性可以寫一個，也可以寫兩個啦。
“css定位元素實現的背景圖像”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
