gpt4 book ai didi

css - 删除将文本叠加到 img 时留下的空白区域,(html,css)

转载 作者:行者123 更新时间:2023-11-28 13:24:12 24 4
gpt4 key购买 nike

我是 html、css 的新手,我正在尝试为移动应用程序做一个菜单,其中包含一些垂直对齐的相邻图像,我想在这些图像上叠加一些文本。例如,想象一个体育信息相关应用程序的主菜单,它包含 5 个背景图像,足球图像、篮球图像、高尔夫图像……每个图像的底部都有文本。

为了解决这个问题,我编写了以下 html 代码:

<body onload="onBodyLoad()">
<div id="cabecera">

<h1></h1>
</div>
<div id="menu-opciones">
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/Acercade.html"></a>
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/LugaresDeInt.html"></a>
<h2><span>Lugares de interes</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/DondeComer.html"></a>
<h2><span>Dónde comer</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/DondeDormir.html"></a>
<h2><span>Dónde dormir</span></h2>
</div>
<div class="opcion-menu">
<img src="../img/fronton.jpg" alt="">
<a href="./web/TiempoLibre.html"></a>
<h2><span>Tiempo libre</span></h2>
</div>
</div>
</body>

这样我就得到了图像,然后是文本,然后是另一幅图像,然后是另一幅文本...所以通过 css,我重新定位了文本以覆盖每幅图像。问题是现在我得到了之前文本所在的空白空间,我希望图像彼此相邻。摆脱那个空白空间的最好方法是什么?请注意,因为这是针对移动应用程序的,所以我想避免在 css 上使用像素,并尝试做所有 % 相关的事情。

最佳答案

不能 100% 确定您要实现的目标,但我认为您可以清理 html 并实现您想要的目标。您可以将每个列表项包装在一个 the 中并获得相同的效果。例如:

<div class="opcion-menu">
<img src="../img/tarta.jpg" alt="">
<a href="./web/Acercade.html"></a>
<h2><span>Sobre txorierri y Erandio</span></h2>
</div>

更改为:

<div class="opcion-menu">
<a href="./web/Acercade.html"><img src="../img/tarta.jpg" alt=""><span>Sobre txorierri y Erandio</span></a>
</div>

然后设置 to position:relative 和 to position:absolute 以将其从文档流中取出。这也将消除该空白区域,您可以使用 left:-9999; 相对于您的图像定位或隐藏它;不透明度:0;

希望对您有所帮助。

关于css - 删除将文本叠加到 img 时留下的空白区域,(html,css),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14364171/

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