[英]How to set blocks and text on image and be full responsive
我正在使用flexbox從PSD文件制作一個網站。 我需要創建如下所示的塊。 我想知道如何通過使用img標簽設置這些圖片或將它們設置為背景圖像以實現完全響應? 另外我也不知道如何設置文本“ Active users(34)”和“ Used Products(658)。我嘗試使用絕對和相對位置,但是以較小的分辨率運行圖像...
我的代碼:
.container { display: flex; justify-content: center; flex-wrap: wrap; max-width: 100%; } .blocks { width: 100%; height: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; } .blocks__text { width: 33%; height: 100%; background-color: white; text-align: center; padding: 40px; } .blocks__text h1 { color: #fd634e; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; } .blocks__text h2 { color: #a2ca28; font-family: 'Open Sans', sans-serif; font-size: 35px; font-weight: 300; line-height: 30px; padding: 10px; } .blocks__text p { color: #656e74; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; line-height: 26px; } .blocks__text img { padding: 10px; } .blocks__text a { color: #a2ca28; font-size: 14px; font-weight: 400; line-height: 26px; } .blocks__image { width: 67%; background-size: 100% 100%; } .blocks__bg1 { background-image: url('../images/fitnessFirst.png'); } .blocks__image p { color: #f7614c; font-family: "Open Sans"; font-size: 12px; font-weight: 400; line-height: 26px; margin-right: 15px; } .blocks__users { position: relative; height: 100%; top: 50%; left: 60%; } .blocks__users p span { color: white; } @media (max-width: 768px) { .blocks__text { width: 100%; } .blocks__image { width: 100%; height: 25em; } } .blocks2 { flex-wrap: wrap-reverse; } .blocks__bg2 { background-image: url('../images/yourBody.png'); } .blocks__users2 { } .blocks__users2 p{ color: white; }
<div class='container'> <article class= 'blocks'> <div class='blocks__text'> <h1>IT'S ALL ABOUT</h1> <h2>FITNESS FIRST</h2> <img src='images/whiteShape.png'> <p>Cras et dolor libero. Aenean luctus accumsan enim quis finibus. Sed id mattis leo. Nulla nulla turpis, condimentum eu felis eu, consequat volutpat orci. Maecenas lacus justo, fermentum eu pulvinar quis, posuere vel velit. </p> <a href="#">Read More</a> </div> <div class='blocks__image blocks__bg1'> <div class='blocks__users'> <p>Active Users <span>(34)</span></p> <img src="images/orangeShape.png"> </div> </div> </article> <article class= 'blocks blocks2'> <div class='blocks__image blocks__bg2'> <div class='blocks__users2'> <p>Products USed <span>(658)</span></p> <img src="images/orangeShape.png"> </div> </div> <div class='blocks__text'> <h1>LOVE YOUR BODY</h1> <h2>YOUR BODY</h2> <img src='images/whiteShape.png'> <p>Cras et dolor libero. Aenean luctus accumsan enim quis finibus. Sed id mattis leo. Nulla nulla turpis, condimentum eu felis eu, consequat volutpat orci. Maecenas lacus justo, fermentum eu pulvinar quis, posuere vel velit. </p> <a href="#">Read More</a> </div> </article> </div>
<div class='blocks__image blocks__bg1'>
<div class='blocks__users'>
<img src="../images/fitnessFirst.png" alt=""/>
<p>Active Users <span>(34)</span> <img src="images/orangeShape.png"></p>
</div>
</div>
並設置此樣式
.blocks__users {position: relative;}
.blocks__users p {position: absolute; bottom: 40px; right: 30px}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.