<h1>New Product</h1> <div class="container"> <div class="row"> <!-- 分配左右二個框 (左側圖片區) --> <div class="col-12 col-md-6"> <!-- 圖片的外圍再加一個框,目的是為了圖片下方的陰影 --> <div class="imgarea"> <img src="img/sec2img.jpg" class="d-block w-100" alt=""> </div> </div> <!-- 分配左右二個框 (右側文字區) --> <div class="col-12 col-md-6"> <h3>美白系列修護精華液</h3> <p>美白是一輩子的事,唯有長期做好防曬與美白保養...。</p> <p>美白是一輩子的事,唯有長期做好防曬與美白保養...。</p> </div> </div> </div>
/* 設計兩旁陪襯的背景圖,同一個區域同時擁有3張背景圖 ====================== */ #sec2 { background-image: url(img/sec2_f1.png), url(img/sec2_f1.png), url(img/sec2_f2.png); background-repeat: no-repeat; background-position: -15px 60px, left bottom, right bottom; background-size: 10vw auto, 7vw auto, 15vw auto; /* 背景圖尺寸寬度單位使用vw,對應到螢幕的百分比,10vw表示螢幕寬度的百分之10 */ } /* 設計左側區塊框,讓內容(圖片)水平置中,讓重疊的物件在上方 ================= */ #sec2 .col-12:first-child { text-align: center; } /* 這是左側圖外再加的框 */ #sec2 .col-12 .imgarea { position: relative; display: inline-block; } /* 這是左側圖下方的陰影設計 */ #sec2 .col-12 .imgarea::after { content: ''; background: url(img/shadow.png) no-repeat; position: absolute; left: 0; bottom: -30px; width: 100%; height: 30px; background-size: contain; transform: translateY(-2px); } /* 這是左側圖的設計 */ #sec2 .col-12 img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; } /* 設計右側文字內容的區塊框 ================================== */ #sec2 .col-12:last-child { position: relative; padding: 20px; padding-bottom: 50px; text-align: justify; } #sec2 .col-12:last-child h3 { margin-bottom: 20px; position: relative; z-index: 2; } #sec2 .col-12:last-child p { position: relative; z-index: 2; } /* 考量 RWD 再加以調整設計 */