Question

我一直在与一个jumbotron背景图像战斗，我设法在网站上正确排队，但我似乎无法使其成为移动响应。该网站的链接是puremistdiffusers.com

以下是HTML：

<div class="jumbotron" style="background-image: url(https://puremistdiffusers.com/wp-content/uploads/2017/02/slider-candle-jpeg-dark.jpg); background-repeat: no-repeat;">
    <div class="container">

        <h1 class="text-uppercase">YOUR AROMATHERAPY</h1>
        <p>UP TO 40% OFF ON ALL PRODUCTS</p>

        <a class="btn btn-default btn-inverse btn-lg text-uppercase topbutton" href="https://puremistdiffusers.com/product/" role="button">Shop Now</a>&nbsp;

    </div>
</div>

，这是CSS：

}
.jumbotron {
    background-color: #fff !important;
}
.jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
    height: 397px !important;
    background-position: center;
    width: 100%;
}
.jumbotron .container {
    max-width: 100%;
}
.jumbotron h1, .jumbotron .h1 {
    color: #fff;
    font-size: 50px !important;
    text-align: center;
}
.jumbotron h1, .jumbotron .h1 {
    color: #fff;
    font-family: "Adobe Garamond Pro", "Adobe Caslon Pro", Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
}
.jumbotron p {
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}
.btn-default.btn-inverse {
    color: #FFFFFF;
    background-color: #162e00;
    border-color: #FFFFFF;
}
.topbutton {
    padding: 1% 6%;
    font-size: 20px;
    line-height: 2.375rem;
    border-radius: 0.1875rem;
    margin-left: 38%;
    margin-top: 3%;
}
.btn:hover{
    background:transparent;
    color:#fff;
}
@media (max-width:768px){
    .jumbotron h1, .jumbotron .h1 {
    color: #fff;
  font-size: 30px !important;
}
.jumbotron p {
  font-size: 17px;
}
.jumbotron {
    height: 259px !important;
}
.btn {
    margin-left: 30%;
}
}
@media (max-width:640px){
    .jumbotron h1, .jumbotron .h1 {
    color: #fff;
  font-size: 20px !important;
}
.jumbotron p {
  font-size: 12px;
}
.jumbotron {
    height: 259px !important;
}
.btn {
    margin-left: 30%;
}
}
@media (max-width:480px){
    .jumbotron h1, .jumbotron .h1 {
    color: #fff;
  font-size: 17px !important;
}
.jumbotron p {
  font-size: 12px;
}
.jumbotron {
    height: 259px !important;
}
.btn {
    margin-left: 30%;
}
}

我尝试了几种不同的技术，我在stackoverflow上找到了这些技术，但我要么让所有内容排在左边，而不是居中或中心所有内容，只是松散了移动响应。提前致谢。

Answer 1

好的，要添加这一行：

.jumbotron {
background-image: url('your image background');
height: 100%;
width: 100%;
background-size: cover;
}

.jumbotron .container {
position: relative;
top:100px;
}

并在html的 head 标记中添加以下内容：

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

将背景Jumbotron图像居中并使其成为移动响应

1 个答案: