html - 图像背景溢出问题
问题描述
我在部分之间放置了几个 PNG 图像,效果很好,但是当我到达页脚时,当我应用“顶部”属性时,我在后面的英雄视频就会出现。
我尝试了一些方法,例如应用宽度/高度然后溢出:隐藏,似乎没有任何效果。它作为 CSS 背景效果很好,但这意味着我无法在该部分中编辑图像,至少我认为我不能。
基本上我只是在寻找被推到页脚之外的图像,而不是在它后面显示我的英雄视频。
我对此很陌生,所以任何有用的反馈或建议都会很棒!
HTML
<footer>
<img class="leaf-left" src="resources/img/leafgroup-left.png">
<!-- ~~~ insert section img -->
<div class="row">
<div class="cta-text animated shake">
<ul class="footer-nav">
<h2>Upcoming project? Get in Touch.</h2>
</ul>
</div>
</div>
</footer>
CSS
footer {
background-color: #fcfcfc;
padding: 50px;
width: 100%;
height: 20%;
font-family: 'Lato', sans-serif;
font-weight: 200;
}
.footer-nav {
margin-left: auto;
text-align: center;
}
.leaf-left {
position: absolute;
width: 30%;
height: auto;
left: 80%;
top: 900%;
}
解决方案
您需要添加position: relative;
到父级。我在下面做了一个极简主义的例子:
footer {
background-color: #9a9a9a;
width: 100%;
height: 100px;
position: relative; /* This is important */
overflow: hidden;
}
.image-simulation {
background-image: linear-gradient(#e66465, #9198e5);
width: 1000px;
height: 1000px;
position: absolute;
left: 0%;
top: 50%;
}
<footer>
<div class="image-simulation"></div>
</footer>
推荐阅读
- node-modules - 你如何打包一个 tree-sitter 语法以供消费?
- c++ - Binding free functions as class member functions
- r - 如何使用 sjPlot 在 R Shiny 中报告 html 表?
- javascript - Dynamically Select An HTML option based previous select option
- c# - 添加到并发队列时阻止任务启动
- modelica - 如何使用 Dymola 添加单位换算
- javascript - React JS memory leak with periodic calculations using setInterval
- image - 当您在 Flutter 中以字节形式接收图像时,如何读取/写入具有原始扩展名的图像文件?
- c# - Send PDF to the browser rather than saving to the server - ASP.NET iText 7 C# Web Forms
- puppeteer - 如何使用元素标题的一部分在 Puppeteer 或 Playwright 中找到元素?