發出放置圖像的底部和外部的DIV

我想放置一個圖像（這將是一個三角形向下）底部的白色背景，但以外它（頂部我的圖片應該觸及DIV的底部）。我怎麼能做到這一點？我嘗試了以下方法，但這並不起作用 - 儘管調整了利潤率，圖像仍保留在DIV內。發出放置圖像的底部和外部的DIV

https://jsfiddle.net/63s86hf9/8/

</div><img src="http://placehold.it/92x45" class="triangle-outside" alt="" width="92" height="45"> 
</section>

CSS：

.triangle-outside { 
    display: block; 
    margin: 45px auto 0; 
}

來源

2016-04-09 Greg

謝謝。我認爲這可能被認爲是一個不同的問題。第一個問題是將圖像放在頂部和DIV內。這是關於將DIV放在DIV的底部和外部。 – Greg

只是讓我知道，在'section'或'container'之外？ – Pedram

節。謝謝。 – Greg

好了，你可以用很多方法，但其中的一個做它用position: absolute：

.triangle-outside { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: -45px; 
    margin: auto; 
}

jsFiddle

，但你需要家長(section)設置position: relative並添加margin-bottom它。並注意不要使用相同的id，因爲section,ID必須是unique。此方法是跨瀏覽器，但也可以使用after或before。

#services2::after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: -45px; 
    margin: auto; 
    background: url('http://placehold.it/92x45') no-repeat; 
    width: 92px; 
    height: 45px; 
}

jsFiddle

然後取出.triangle-outside。但如果你想使用href，所以你必須使用prev方法。

我爲身體設置了測試的背景顏色，稍後將其刪除。

來源

2016-04-09 09:13:55 Pedram

您的圖片有-80px的陰性切緣，和你的部分960x75像素的填充。所以你有一個5px的差異，使它看起來像是在div內。

您可以：

通過75px
更改替換80px這個醜陋的負利潤率的方法使用絕對/相對位置
:before/:after僞元素也可以做的事情，如果這是相同的圖像每次。

你沒有白色div的問題。這只是身體背景太白，你認爲它是在裏面，但實際上是在外面。 https://jsfiddle.net/oL40awap/1/

來源

2016-04-09 08:41:13 FLX

感謝您的評論。我認爲你的答案與DIV頂部的圖像有關，我不關心那個。問題在於DIV底部的問題。我創造了一個新的小提琴以避免混淆。 – Greg

看我的最後一行。我的瀏覽器是鉻合金，一切都很好。看到這個分支︰https://jsfiddle.net/oL40awap/1/我添加了一個紅色的背景讓你看到。底部的圖像位於紅色部分內部的白色div之外，並具有45px的頂部邊距。 – FLX

發出放置圖像的底部和外部的DIV

回答

相關問題