【发布时间】：2021-01-17 23:50:09
【问题描述】：
我正在这样做website，当我在手机上看到它时，背景图片变得模糊。即使在谷歌开发工具中，如果我尝试响应式工具，它似乎也不错。 我尝试了不同的手机，它们也显示模糊，所以这是我的问题:) 这是代码：
.main {
/* background-image: url("https://images.unsplash.com/photo-1559742811-822873691df8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"); */
background-image: url("https://images.unsplash.com/photo-1534080564583-6be75777b70a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* background-size: contain; */
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #464646;
}
我在here 和其他地方看到了它，但似乎没有任何效果。我在这里做错了什么？ 感谢您的帮助
【问题讨论】：
-
图片比例怎么样？
-
不是真的...我在这里遗漏了一些东西...我说它很模糊，但它确实放大了。基本上在移动设备中，它只显示图像顶部的一小部分..
-
我把图片的链接改小了，背景位置去掉了：wizardly-panini-045e19.netlify.app。更好，但图像不清晰...
标签： html css mobile responsive-design