html - css 负背景位置或替代方案？

Question

我创建了一个包含列表项的内容 div，div 略微 flex ，我要在其上放置一个背景图像，该图像出现在 div 的左下角，div 目前有一个 40x40 的黑框图像，基本上我希望这张图片的 20px 位于内容 div 底部之外，这可以通过仅使用背景定位来完成吗？

<div id="continent-pl">
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </div>
    </div>

div#continent-pl, .flip{
        margin:0px;
        padding:5px;
        text-align:center;
        background:#ebebeb;
        /*border:solid 1px #c3c3c3;*/
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    div#continent-pl{
        height:120px;
        margin: 0 23px 20px;
        width: 880px;
        display:none;       
        border-bottom: 1px solid #c5c5c5;
        /*background: #ebebeb url(../images/footer-arrow.jpg) no-repeat 0 100%;*/
        background: #ebebeb url(http://dummyimage.com/40/000/fff.gif) no-repeat 0 100%;
        position: relative;
    }

    #continent-pl div{
        float: left; 
        width: 200px; 
        margin-right: 20px;
    }

凯尔

Answer 1

您将无法使用 background-image 实现您想要实现的目标属性，因为背景不能超出元素的内容框。

您有几个选择。

选项 1 - View Demo
您可以在 #continent-pl 中添加另一个元素然后将其绝对定位到左下角。

选项 2 - View Demo
你可以用 #continent-pl 中的图像标签做同样的事情。并绝对定位它。

选项 3 - View Demo
如果你想要一个不添加任何非语义 html 的选项，你可以使用 content:after CSS 属性，它实际上创建了可以设置样式的生成内容。 注意此技术不适用于 IE6 或 IE7。