css負面的背景位置或替代品？

Question

我創建了一個包含列表項的內容div，div稍微彎曲，我在這個div的左下角顯示了一個背景圖片，div裏面有一個黑盒子圖像40x40，基本上是I想讓這個圖像的20像素位於內容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
如果你想不加，你可以使用的實際創建生成的內容，你可以風格content:after CSS屬性的任何非語義HTML的選項。 注意此技術在IE6或IE7中不起作用。

Answer 2

不確定您的具體要求，但你可以移動使用background-position圖像。在你的例子中，你將它移動到background-position: 0 110px。

爲此，您需要知道div和填充的高度。這裏的div高度是120px，填充是頂部和底部5px，所以總大小是130px。減去20px，你想要顯示在div底部上方的高度，並且你得到110px。

見DEMO

不知道如果這是你所追求的，但你去。