Question

我有以下代码要在图像上放置文本框。文字覆盖了图像，但是当我将背景色设置为白色时，它仍然显示为透明。我之前已经做过，但是由于某种原因，它在这里不起作用。任何帮助将不胜感激。

    <section>
        <h1 style="margin-left: 10%;">Blah, blah</h1>
        <img src="_images/some.jpg" style="margin-left: 10%; width: 60%;" >
        <section style="margin-left: 45%; margin-top: -35%; background-color: #FFF; padding: 1em; width: 20%;">
            <p style="font-size: 2em; margin-top: -5%;">More blah, blah.</p>
            <p style="font-size: 1.2em; ">Even more blah, blah.</p>
        </section>
    </section>

Answer 1

将内部部分元素上的位置设置为相对。

<section>
        <h1 style="margin-left: 10%;">Blah, blah</h1>
        <img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" style="margin-left: 10%; width: 60%;" >
        <section style="position: relative; margin-left: 45%; margin-top: -35%; background-color: #FFF; padding: 1em; width: 20%;">
            <p style="font-size: 2em; margin-top: -5%;">More blah, blah.</p>
            <p style="font-size: 1.2em; ">Even more blah, blah.</p>
        </section>
    </section>

Answer 2

代替

background-color: #FFF;

使用此

background-color: rgba(0,0,0,0);

文本框的背景色不会改变

2 个答案: