如果你想讓 CSS 背景只顯示部分,可以嘗試使用 background-clip 屬性。
這個屬性可以設置背景圖片的顯示范圍,常用的值有:
background-clip: border-box; /* 背景圖片在元素的 padding-box 區域內顯示 */ background-clip: padding-box; /* 背景圖片在元素的 content-box 區域內顯示 */ background-clip: content-box; /* 背景圖片僅在元素的 border-box 區域內顯示 */
通過設置 background-clip: padding-box;,可以讓背景圖片僅在元素的 padding-box 區域內顯示,從而只顯示一個小的部分。
div { background-image: url("example.jpg"); background-position: center center; background-size: cover; background-clip: padding-box; }
如果你只想顯示圖片的一部分,可以通過調整背景圖片的位置來實現。比如,將 background-position 設置為 left top 即可讓背景圖片向左上角偏移。
div { background-image: url("example.jpg"); background-position: left top; background-size: cover; background-clip: padding-box; }
需要注意的是,background-clip 屬性不支持 Internet Explorer 9 及早期版本。因此,如果你需要在舊版瀏覽器中使用該屬性,可以考慮使用 hack 或 polyfill。