Блог

Я создал раздел содержимого, который содержит элементы списка, раздел слегка изогнут, и я должен был разместить на нем фоновое изображение, которое отображается в левом нижнем углу раздела, в настоящее время в разделе есть изображение черного ящика 40×40, в принципе, я хочу, чтобы 20 пикселей этого изображения находились за пределами нижней части раздела содержимого, можно ли это сделать, просто используя расположение фона?

 <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;
    }
  

Кайл

Вы не сможете достичь того, чего пытаетесь достичь, используя background-image свойство, потому что фоны не могут выходить за пределы поля содержимого элемента.

У вас есть несколько вариантов.

Вариант 1 — Посмотреть демо
Вы могли бы просто добавить еще один элемент внутри #continent-pl , а затем полностью поместить его в нижний левый угол.

Вариант 2 — Посмотреть демо
Вы могли бы сделать то же самое с тегом изображения внутри #continent-pl и полностью расположить его.

Вариант 3 — Посмотреть демо
Если вам нужен параметр, который не добавляет никакого несемантического html, вы могли бы использовать content:after свойство CSS, которое фактически создает сгенерированный контент, который вы можете стилизовать. Обратите внимание, что этот метод не работает в IE6 или IE7.

Не уверен в ваших точных требованиях, но вы можете переместить изображение с помощью background-position . В вашем примере вы бы переместили его в background-position: 0 110px .

Для этого вам нужно знать высоту div и отступы. Высота div здесь равна 120 пикселям, а отступы — 5 пикселям сверху и снизу, так что общий размер равен 130 пикселям. Вычтите 20 пикселей, высоту, которую вы хотите отобразить над нижней частью div, и вы получите 110 пикселей.

Смотрите ДЕМО

Не знаю, это ли то, что вам нужно, но вот так.