html - 将 CSS 背景图片适配到 IOS
问题描述
我真的可以使用一些帮助。
我有一个 2000x1000 的图像 png 文件,用作网站的背景。它在桌面上工作得很好。在我的 iphone 上查看时,仅显示图像的左侧 1/3,并且将两个堆叠在一起。我尝试过使用background-size: auto
and 100%
,background-attachment:scroll
但无济于事。我已经从较大的图像创建了一个适当的纵横比图像并使用了媒体查询,但它最终仍然非常奇怪。你可以在这里找到我当前的媒体,它应该检测分辨率是否 < 415px 以将大小更改为最大,但这不起作用。理想情况下,我希望背景位于中间,保持其纵横比并占据整个窗口高度。这是我的CSS。谢谢。
*
{
margin: 0;
padding: 0;
}
.email
{
color:black;
font-size: 25px;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
body
{
background: black;
background-image: url("images/Mountains.png");
}
.html
{
width: 100%;
height: 100%;
}
.github
{
position: fixed;
top: 37%;
left: 41%;
transform: translate(-50%, -50%);
}
#items
{
transition: margin-left .5s;
padding: 20px;
}
.link_in
{
position: fixed;
top: 37%;
left: 59%;
transform: translate(-50%, -50%);
}
.loc
{
color:black;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-height: 450px)
{
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
@media screen and (max-width: 415px)
{
body
{
background-color: black;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
}
@media screen and (max-width: 1100px)
{
.github {
position: fixed;
top: 37%;
left: 31%;
transform: translate(-50%, -50%);
}
.link_in
{
position: fixed;
top: 37%;
left: 69%;
transform: translate(-50%, -50%);
}
}
.sidenav
{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a
{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover
{
color: #f1f1f1;
}
.sidenav .close
{
font-size: 36px;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
}
.thanks
{
color:black;
position: fixed;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
.under_construction
{
position: fixed;
top: 37%;
left: 50%;
transform: translate(-50%, -50%);
}
解决方案
我认为您正在尝试保持背景图像固定和响应。您可以保持要覆盖的大小,因此它将调整背景图像的大小以覆盖整个容器,即使它必须拉伸图像或从其中一个边缘剪掉一点。然后你可以将位置设置为中心,所以如果它拉伸它将显示图像的中心部分。并保持附件固定,这样滚动时背景图片就固定了。
background-size: cover;
background-position:center ;
background-attachment: fixed;
推荐阅读
- snowflake-cloud-data-platform - Snowflake 作为前端 UI 的后端数据库
- ios - navigator.share() 在 iOS 电子邮件中无法按预期工作
- python - 试图从另一个类更改一个类的属性值,但一个值改变了另一个值保持不变
- java - 如何在 XML API 中发送输入请求?
- php - 为什么这个数组只打印循环外的最后一个值?PHP
- php - cURL 中的异步,它有一个 foreach 循环
- python - typeerror: unhashable type: 'list' , 将列表转换为字典
- regex - 估算缺失值
- oracle - 安装 EMC12c 配置助手存储库失败
- java - 将 Json 转换为 Pojo 实现标记接口