背景图象模糊在移动ios
kgo*_*517 3 css mobile ios web responsive
这可能是一个新手问题,但我似乎无法找到解决我遇到的问题的方法.在我的网站我有在任何尺寸的屏幕上呈现完全桌面不错,但成为手机上查看时模糊混乱的背景图像.我已经看到了几个类似的问题,无论是没有答案还是对我不起作用的解决方案,我们将非常感谢任何帮助.
这是网站
以下是我正在经历的一些截图.
这是我的代码.
<div class="jumbotron">
<h1 class="text-center" id="head">Kyle Goode</h1>
<p class="text-center" id="header">Full Stack Web Developer</p>
</div>
</div>
.home {
background: url(http://mrg.bz/VN5LDd) fixed no-repeat center;
background-attachment: fixed;
background-size: cover !important;
max-width: 100%;
height: 900px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
编辑:ValentinoKožinec是对的.似乎是固定和封面的iOS问题.
改变.home到这个:
.home {
background: url(http://mrg.bz/VN5LDd) no-repeat center;
并删除
background-attachment: fixed;
它似乎工作.
您有Doctype和head标签,然后在您的身体内再次拥有它们.这可能会导致您的问题.值得一看.
这是从您的网站复制并粘贴到此处:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Portfolio </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta -->
<title>Goode Web Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
| 归档时间： |
|
| 查看次数： |
4585 次 |
| 最近记录： |