帶圖像絕對位置的文字

我有一張圖片，需要在右下角添加標籤。帶圖像絕對位置的文字

當我在那裏拍攝時，它在圖像下方4px，沒有填充或邊距。

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

什麼是解決它的最好方法？我不認爲

bottom: 4px;

是正確的。

謝謝

來源

2017-05-04 David

，因爲它們使用的正是這種目的，你也可以使用''

爲包裝和''

爲標題。 – MateBoy

默認情況下圖像標記採取底部一些額外的空間，因爲它是內聯元素。將其更改爲block元，除去多餘的空間

.thumbnail { 
    display: block; /*inline-block, float:left etc..*/ 
}

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
} 
 
.thumbnail { 
 
    display: block; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

來源

2017-05-04 08:52:42

這是正確的答案，你贏了我:) –

@Marcos佩雷斯古德謝謝 –

只需添加display: block;縮略圖類。

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
} 
 
.thumbnail { 
 
    display: block; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

來源

2017-05-04 08:54:02

這不會改變任何東西！ –

對不起......錯誤元素... –

已更新回答:) –

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.postImage img.thumbnail { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 

 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

來源

2017-05-04 08:55:37 athi

這是真的，img默認顯示的是inline並通過改變display:block這樣的作品，但如果你don't想change display那麼你可以添加vertical-align:bottom它將元素對齊到bottom line o f parent div如下，並且是底部：0正常工作，因爲您的.commercial被定位爲絕對。

.postImage { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.post img.thumbnail { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 
.commercial { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #666; 
 
    color: #fff; 
 
    padding: 3px; 
 
    font-size: 14px; 
 
    font-weight: 100; 
 
} 
 
img{ 
 
    vertical-align:bottom; 
 
}

<div class="postImage"> 
 
    <img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff"> 
 
    <span class="commercial">commercial</span> 
 
</div>

來源

2017-05-04 09:00:35 frnt

帶圖像絕對位置的文字

回答

相關問題