代表我想做的事我一直在嘗試將箭頭定位在視口的底部并將內容放在它下面...問題是箭頭和內容都存在于同一個父元素中，我不確定我是否做得很好...在網站建設方面我是一個初學者，我一直在這個問題上摸不著頭腦。下面是 HTML 和 CSS 代碼：<div class="continut"> <img src="img secundare\sageata-jos-n.png" alt="sageata in jos" id="sageata-jos"> <!-- Buton dark mode --> <div class="theme-switch-wrapper"> <p>Mod intunecat</p> <label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox" /> <div class="slider round"></div> </label> </div> <p>Rusia (?n rus? Росси?я, transliterat: Rossia; pronun?ie rus?: /r??s?ij?/), oficial Federa?ia Rus? (?n rus? Росси?йская Федера?ция, transliterat: Rossiiskaia Federa?ia, pronun?at /r??s?ijsk?j? f??d???rats?j?/), este o ?ar? ?n Eurasia. Cu 17.125.200 km2, Rusia este cea mai ?ntins? ?ar? din lume, acoperind peste o optime din suprafa?a locuit? a P?mantului, ?i a noua ca popula?ie, cu peste 144 de milioane de oameni ?n decembrie 2017, excluzand Crimeea. Aproximativ 77% din popula?ie tr?ie?te ?n partea vestic?, european?, a ??rii. Capitala Rusiei, Moscova, este unul dintre cele mai mari ora?e din lume?; alte mari ora?e? sunt Sankt Petersburg, Novosibirsk, Ekaterinburg ?i Nijni Novgorod.</p> </div>div.continut{ background-color: var(--bg-color); color: var(--font-color); font-size: 20px; padding: 20px 10% 50px 10%; position: sticky; top: 0px; margin: 0; height: 100%; width: auto; text-align: left;}這些變量用于深色/淺色主題切換器，如果您想知道的話，語言是羅馬尼亞語。我不關心類名或 id到目前為止，我所做的就是僅針對特定的屏幕分辨率正確定位箭頭和內容......
1 回答
慕蓋茨4494581
TA貢獻1850條經驗 獲得超11個贊
body {
margin: 0;
padding: 0
}
.hero-image {
position: relative;
width: 100%;
height: 90vh;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover
}
.arrow-down {
position: absolute;
bottom: -8%;
left: 50%;
transform: translateX(-50%)
}
.content{padding: 100px}
<div class="continut">
<div class="hero-image">
<img src="http://razu.me/stackO/bg.jpg" alt="">
<div class="arrow-down">
<img src="http://razu.me/stackO/arrow-down.png" alt="">
</div>
</div>
<div class="content">
<h3>Heading Text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab qui, iste perspiciatis natus quam dolores non adipisci, nobis pariatur cupiditate vitae consequatur accusamus illum ipsum, amet aspernatur consectetur? Adipisci repellat ipsam placeat porro soluta ea corporis, veritatis officiis facere illo voluptas, sunt quis tenetur minima repellendus quia. Explicabo commodi voluptates dicta consectetur, sequi ipsam atque, officiis eaque nulla deleniti possimus quaerat eligendi laudantium libero! Libero expedita quidem atque eius veniam, delectus nobis perferendis, placeat itaque sapiente aperiam repellendus! Quaerat atque eveniet expedita culpa, maxime incidunt quis nostrum harum fugit, iusto praesentium, rem unde deleniti dicta beatae eos maiores eligendi nisi.</p>
</div>
</div>
- 1 回答
- 0 關注
- 114 瀏覽
添加回答
舉報
0/150
提交
取消