Question

我正在视图中使用覆盖整个屏幕的部分的背景图像。然后当页面滚动时，它会被后续部分覆盖。

#section1{
 background: URL(../SiteData/Images/SectionBackground.jpg) no-repeat center top fixed #f1ece2;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

min-height:800px;
}

我想在此图片的一半处添加文字。我可以这样做，但我希望它保持原位，好像它实际上是图像的一部分。因此，当屏幕向上滚动时，文本会被隐藏而不是滚动到顶部 - 因此它会保留在图像上的位置。

我该怎么做？

由于

Answer 1

以下是一个演示答案，可让他们同时响应图像和文字enter image description here。试试这个但不仅仅是复制粘贴。尝试了解css这个文本如何覆盖图像。如果您有任何疑问，请在评论中提问我。祝你好运。

  .img-reponsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.textoverimage {
  position: relative;
}

p.title {
  position: absolute;
  top: 75px;
  left: 0;
  text-align: center;
  font-size: 38px;
  width: 100%;
  color: #fff
}

@media only screen and (max-width: 767px) {
  p.title {
    font-size: 1.5em;
    line-height: 1.5em;
  }
}

@media only screen and (max-width: 479px) {
  p.title {
    font-size: 1.1em;
    line-height: 1.1em;
  }
}

 <div class="textoverimage">
  <img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="demo_img">
  <p class="title"> TEXT </p>
</div>

Answer 2

引导程序 4



    <section class="vh-100" style="
     background: url(public/images/aimage.png) no-repeat center center fixed; 
     background-size: 100%;
 ">
        <div class="container h-100 d-flex ">

            <div class="row my-auto ">
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-12">
                    <div class="jumbotron ">
                        <h1 class="display-3">Hello, world!</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem fuga, molestiae illo pariatur praesentium nemo nam magnam molestias eius at! Cupiditate ratione natus veritatis eaque totam illo accusamus perferendis? Enim?</p>
                    </div>
                </div>


            </div>
        </div>
    </section>

使用CSS将文本添加到背景图像

2 个答案: