使用 css 的文本部分溢出的图像

Question

我正在尝试实现以下输出 -

但是每张图片底部的部分重叠有问题。我可以将它们分开（参见本文末尾的代码post）。我可以在图像下方的 div 上放置负边距，但这会将文本放在图像上，而没有白色背景覆盖图片。

几个限制 - 使用我正在使用的工具，我必须坚持使用内联 css，没有网格或 flexbox。它需要响应，即适应不断变化的浏览器大小（因此可能无法提供固定的像素高度和宽度）。

就响应能力而言，我下面的内容效果很好。但无法实现与白色背景的部分重叠。这是我目前所拥有的

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="overflow: auto">
        <img src="images/SIFT_Video.png" style="display:inline-block;max-width: 47%;min-width: 47%; float: left"/>
        <img src="images/SIFT_User_Guide.png" style="display:inline-block;max-width: 47%;min-width: 47%; float: right"/>
    </div>
    <div style="clear: both"></div>
    <div>
        <table style="table-layout: fixed ; width:100%">
            <tr>
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top">SIFT Video</td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top">User Guide</td>
                <td style="width:2%"></td>
            </tr>
            <tr >
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>SIFT Interview Demo</h3></td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>Interviewer quick reference guide</h3></td>
                <td style="width:2%"></td>
            </tr>
        </table>
    </div>
</body>
</html>

Answer 1

建议您采用基于 <div> 的方法。这是您当前方法的解决方案。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="overflow: auto">
        <img src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:inline-block;max-width: 47%;min-width: 47%; float: left"/>
        <img src="https://images.unsplash.com/photo-1499084732479-de2c02d45fcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:inline-block;max-width: 47%;min-width: 47%; float: right"/>
    </div>
    <div style="clear: both"></div>
    <div style="position:relative;  top: -20px;">
        <table style="table-layout: fixed ; width:100%;">
            <tr>
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top; background: #fff">SIFT Video</td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;color:#00AFAB;vertical-align:top; background: #fff">User Guide</td>
                <td style="width:2%"></td>
            </tr>
            <tr >
                <td style="width:2%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97;"><h3>SIFT Interview Demo</h3></td>
                <td style="width:10%"></td>
                <td style="width:43%;text-align: left;text-transform: uppercase; color:#083A97"><h3>Interviewer quick reference guide</h3></td>
                <td style="width:2%"></td>
            </tr>
        </table>
    </div>
</body>
</html>

使用 css 的文本部分溢出的图像

Image with text partial overflow using css

html

css

image

overlapping