Question

我在这里创建了以下页面，我添加了一个背景图片，此页面在所有设备中都没有响应我做错了什么？我使用了bootstrap。我希望该图像也应该在所有设备中都有响应。我不希望在移动视图中显示完整图像。但是当我在移动视图中看到它应该是很好看的。
请帮我。

<div class="container">
   <section class="col-lg-12">
        <div class="alert alert-danger col-lg-4 invalidData">
            <span class="close" data-dismiss="alert">&times;</span>
            <strong id="errorMessage">Missing required field!</strong>
        </div>
    </section>

    <section class="col-lg-5 col-md-5 col-xs-12 formBorder padding">
        <header class="loginHeader">Login To Go</header>
        <form method="post" action="" name="login" id="login" class="paddingTopBottom">
            <div class="col-lg-12 col-md-12 col-xs-12 fieldPadding">
                <input type="text" class="col-lg-12 col-md-12 col-xs-12" name="email" id="email" placeholder="Enter email here">
            </div>
            <div class="col-lg-12 col-md-12 fieldPadding">
                <input type="password" class="col-lg-12 col-md-12 col-xs-12" name="pwd" id="pwd" placeholder="Enter password here">
            </div>
        </form>
            <div class="col-lg-12 col-md-12 col-xs-12 fieldPadding">
                <input type="submit" class="col-lg-12 col-md-12 col-xs-12 btn btn-info" name="submit" id="submit" value="Go With Credentials" onclick="checkDetails()">
            </div>
    </section>
</div>

https://jsfiddle.net/pszex85n/

Answer 1

您需要为body指定另一个类。你使用了已经由Bootstrap提供的“img”类，现在定义如下。

body class =“img img-responsive”

也使用此css代码。

/*@media (min-width: 1366px) and (max-width: 348px) {*/
.img{
	background-image:url("https://www.mysmartmove.com/sites/SmartMove/img/slider/secure.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 100%;
  background-attachment: fixed;
}
/*}*/
#email,#pwd{
	border: 2px solid #22A7EC;
  width: auto;
    height: 40px;
    background: none;
    border-radius: 5px;
    color:#fff;
}
.formBorder{
	border:1px solid #22A7EC;
	margin-top: 14%;
	width:auto;
}
.fieldPadding{
	padding:10px;
}
.paddingTopBottom{
    padding: 20px;
}
.loginHeader{
	height: 40px;
  width: auto;
	background:#5bc0de;
	font-size: 18px;
	text-align: center;
	padding-top: 9px;
}
.padding{
	padding-right: 0;
	padding-left: 0;
}
#submit,.loginHeader{
	color:#15213B;
  width: auto;
	font-weight: bolder;
}

我认为它可能适用于您的网页。

Answer 2

修复你的CSS：

.img {
    backgroud: url('your background image url') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

之后使用媒体查询来修复不同设备上的尺寸

Answer 3

伙计我不会在我的标题中添加此行，这就是我遇到错误的原因

<meta name="viewport" content="width=device-width,initial-scale=1">

我获得了移动视图的良好背景通过更改以下css

background-position: 53% 100%;

网页的响应能力在所有设备中

3 个答案: