要让背景图片不受自适应影响，可以使用CSS的background-size属性来控制背景图的大小，同时也可以使用background-position属性来控制背景图在元素中的位置。
一、使用background-size
background-size属性可以指定背景图片的尺寸，可以是像素值、百分比，也可以是cover和contain，分别表示将背景图片缩放至完全覆盖元素和完全包含元素，不超过元素的宽高。
background-size: cover; /* 背景图片等比缩放，尽量让图片覆盖元素 */ background-size: contain; /* 背景图片等比缩放，尽量让图片包含在元素内 */ background-size: 100% 100%; /* 背景图片拉伸，使得宽和高全部填满元素 */
例如，以下代码将背景图片等比缩放并覆盖整个元素：
div{
background-image: url('背景图片地址');
background-size: cover;
}
二、使用background-position
background-position属性可以指定背景图片在元素中的位置，可以是像素值、百分比，也可以是left、center、right、top、bottom等值，分别表示左对齐、居中对齐、右对齐、上对齐、下对齐。
background-position: 50% 50%; /* 背景图片在元素中心 */ background-position: left top; /* 背景图片在元素左上角 */ background-position: 0 0; /* 背景图片在元素左上角 */
例如，以下代码将背景图片放置在元素中心：
div{
background-image: url('背景图片地址');
background-size: cover;
background-position: 50% 50%;
}
三、结合background-size和background-position
可以通过结合使用background-size和background-position属性来控制背景图片在元素中的大小和位置。
div{
background-image: url('背景图片地址');
background-size: cover;
background-position: center center;
}
四、背景图片不跟随滚动
如果需要让背景图片固定，不随页面的滚动而滚动，可以使用background-attachment: fixed属性。
div{
background-image: url('背景图片地址');
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
原创文章，作者：DAZQA，如若转载，请注明出处：https://www.506064.com/n/373677.html
微信扫一扫 
支付宝扫一扫 