gpt4 book ai didi

html - 如何添加 div 背景的 margin-top?

转载 作者:太空宇宙 更新时间:2023-11-04 11:57:18 25 4
gpt4 key购买 nike

我有这个page ,其中我在一个框内显示视频,并希望我的背景图像有一些“顶部边距”,这样它就不会显示在框的边缘。我尝试添加 background-position: 10%,但它不起作用。

现在看起来像这样:

enter image description here

这是我的代码:

.eu {
height: auto;
width: 100%;
background: url(images/BODY-VERDE.png);
position: absolute;
top: 0;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
/* max-width: 1200px; */
/* corresponds to max height of 450px */
margin: 0 auto;
}
.container-video {
width: 100%;
height: auto;
background: url(images/BODY-VERDE.png);
margin: 0 auto;
overflow: auto;
}
<div class="bg-image" style="width: 70%;margin: 0 auto;">

<div class="eu">

<div class="text-sus">
<p>Set us perspiciatis</p>
<p style="text-align: center;color: white;font-size: 16px;">unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
</div>

<div class="video">
<img src="images/VIDEO.png" style="width:100%;height:auto;">
</div>

</div>

<img src="images/CU-PRETURI.png">

</div>

我也尝试添加 .bg-image img {margin-top:10%;},但后来一切都失败了,我只想要背景图片。

最佳答案

尝试给出两个坐标:

background-position: 0 50px;

在下面的例子中,背景图片的上边距为 50px

#wrapper {
width: 100%;
height: 300px;
border: 1px solid red;
background-image: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
background-position: 0 50px;
background-repeat: no-repeat;
}
<div id="wrapper"></div>

关于html - 如何添加 div 背景的 margin-top?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30103155/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com