溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css中怎么實現(xiàn)背景定位”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css中怎么實現(xiàn)背景定位”吧!
1、單詞表示法，表示圖片與盒子背景區(qū)域進行對應方向的對齊。
水平方向可選單詞：left、center、right
垂直方向可選單詞：top、center、bottom
2、像素表示法，像素值區(qū)分正負，正數(shù)表示圖片針對盒子的原點向右、向下移動。
第一個屬性值：像素是幾，表示背景圖片左上角針對 border 以內的左上頂點水平方向位移的距離。
第二個屬性值：像素是幾，表示背景圖片左上角針對 border 以內的左上頂點垂直方向位移的距離。
注： 負數(shù)表示圖片針對盒子的原點向左、向上移動。
可以利用屬性值為負數(shù)，制作在小盒子中顯示大的背景圖的一部分。 使用 fireworks軟件量取尺寸，讀取數(shù)據(jù)。可用于精靈圖。
第一步：在設計圖中，使用切片工具制作一個想要顯示區(qū)域大小的切片，讓切片左上頂點位于想要加載的背景部分。
第二步：讀取屬性欄的切片數(shù)據(jù)，其中寬、高就是要加載的盒子的寬高，x 和 y 的數(shù)值表示移動的距離的絕對值，直接將數(shù)值加負號賦值給背景定位屬性。
3、百分比表示法，100%代表的數(shù)值。
水平方向，等價于盒子的border以內的背景區(qū)域寬度減去圖片的寬度。
垂直方向，等價于盒子的border以內的背景區(qū)域高度減去圖片的高度。
到此，相信大家對“css中怎么實現(xiàn)背景定位”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
