![](/img/trans.png)
[英]How to add an image as a text background using CSS pseudo element (:after)
[英]Add text to background image using CSS
我在一個部分上使用背景圖像,該部分在該部分可見時覆蓋整個屏幕。 然后隨着頁面滾動,它被后續部分覆蓋。
#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;
}
我想在這張圖片的一半左右添加文字。 我可以這樣做,但我希望它保持原位,就好像它實際上是圖像的一部分一樣。 因此,當屏幕向上滾動時,文本會被隱藏而不是滾動到頂部 - 因此它會保持在圖像上的位置。
我該怎么做?
謝謝
這是一個演示答案,可讓它們同時響應圖像和文本的Live On FIDDLE 。 試試這個,但不僅僅是復制粘貼。 嘗試了解 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>
引導程序 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.