Question

试图创建自己的响应式网站，但需要有关我的网站背景图片的帮助。谁能给我一些有关我该如何做的帮助/建议？

这是我在.html上获得的代码

        <section class="prime">
            <div class="inner">

                <div class="content">

                <h1>Travel and Coding</h1>

            </div>

            </div>

        </section>

和.css

中

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open sans', sans-serif;
    background-color: #392b27; 
}


.prime {
    width: 100%;
    height: 100%;
    background: url("img/fishing-sunset.JPG");
    display: table;
    top: 0;
    background-size: cover;
}

.prime .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.content h1{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

p {
    font-size: 160%;
    line-height: 210%;
    text-align: justify;
    margin: 3%;
    font-family: sans-serif;
}

@media screen and (max-width: 768px) {
    .content h1 {
        font-size: 250%;
    }
    p {
        font-size: 100%;
        line-height: 160%;
    }
}

需要帮助使其居中，以便用户在使用智能手机时可以看到日落背景封面图片。

Answer 1

添加

background-position: center;  to .prime class

Answer 2

将center标记与css属性一起使用，如下所示：-

  background: url("img/fishing-sunset.JPG") top center;

此背景将始终在所有屏幕尺寸中居中。

Answer 3

尝试将background position设置为center

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open sans', sans-serif;
    background-color: #392b27; 
}


.prime {
    width: 100%;
    height: 100%;
    background: url("https://www.w3schools.com/howto/img_parallax.jpg")no-repeat center;
    display: table;
    top: 0;
    background-size: cover;
}

.prime .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.content h1{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #f9f3f4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

p {
    font-size: 160%;
    line-height: 210%;
    text-align: justify;
    margin: 3%;
    font-family: sans-serif;
}

@media screen and (max-width: 768px) {
    .content h1 {
        font-size: 250%;
    }
    p {
        font-size: 100%;
        line-height: 160%;
    }
}

  <section class="prime">
            <div class="inner">

                <div class="content">

                <h1>Travel and Coding</h1>

            </div>

            </div>

        </section>

Answer 4

您可以使用background-position: center。

我还建议使用flexbox代替display: table

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Open sans', sans-serif;
  background-color: #392b27;
}

.prime {
  width: 100%;
  height: 100%;
  background: url("https://unsplash.it/1200");
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
}

.content {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.content h1 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #f9f3f4;
  text-shadow: 0px 0px 300px #000;
  font-size: 500%;
}

p {
  font-size: 160%;
  line-height: 210%;
  text-align: justify;
  margin: 3%;
  font-family: sans-serif;
}

@media screen and (max-width: 768px) {
  .content h1 {
    font-size: 250%;
  }
  p {
    font-size: 100%;
    line-height: 160%;
  }
}

<section class="prime">
  <div class="inner">
    <div class="content">
      <h1>Travel and Coding</h1>
    </div>
  </div>
</section>

将屏幕尺寸更改为智能手机屏幕尺寸时，无法居中背景图像

4 个答案: