html - 移动响应时图片变得模糊
问题描述
我正在做这个网站,当我在手机上看到它时,背景图片会变得模糊。即使在谷歌开发工具中,如果我尝试响应式工具,它似乎也不错。我尝试了不同的手机,它们也显示模糊,所以这是我的问题:) 这是代码:
.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;
}
我在这里和其他地方看到了它,但似乎没有任何效果。我在这里做错了什么?感谢你的帮助
解决方案
尝试在这里玩object-fit
属性w3 链接
推荐阅读
- r - R - 为列表中的每个数据框添加一个新 ID(使用 apply 或 dplyr)
- mysql - 在 mysql 中使用限制和更新
- java - 使用 Java 的相互身份验证(带客户端证书 PFX 文件)并且无法访问环境
- node.js - 使用 X-Ray-Scraper 刮取背景图像
- javascript - 在根问题上反应嵌套路由
- java - 如何将测试生成的源保留在生成的源目标文件夹之外
- python - 在 python 中使用分类 x 和 y 轴绘制数据
- python - CSV 文件字段重新格式化
- haskell - 如何在函数内打印变量?
- r - 在R中向ggsurvplot添加一条垂直线