解决背景图设置100%铺满时，缩放浏览器出现水平滚动条时，滚动条超出的部分背景图没有铺满的问题

最新推荐文章于 2023-08-01 16:28:58 发布

凡小多

最新推荐文章于 2023-08-01 16:28:58 发布

阅读量1.6k

点赞数

分类专栏： HTML+CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/wgh4318/article/details/125974775

版权

HTML+CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0}
		.wrap{
			height: 40px;
			width: 1000px; 
			background-color: #ccc;
		}
		.box{
			background: url('/img.png');
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">example</div>
	</div>
</body>
</html>

当视口宽度小于1000时，实际body元素的宽度没有被撑开到1000PX。而是按默认设置为“浏览器可视窗口的宽度”和”min-width”属性中的最大值来解析的。

**解决方法：**给父元素设置min-width（或者给body设置min-width）

body {
  min-width: 1000px;
}

关注博主即可阅读全文

优惠劵

凡小多

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决背景图设置100%铺满时，缩放浏览器出现水平滚动条时，滚动条超出的部分背景图没有铺满的问题

当视口宽度小于1000时，实际body元素的宽度没有被撑开到1000PX。而是按默认设置为“浏览器可视窗口的宽度”和”min-width”属性中的最大值来解析的。**解决方法**给父元素设置。
复制链接

扫一扫