圓形照片上的小覆蓋圖

嗨即時通訊工作在個人網站上，我希望有一個圓形的照片底部〜10％填寫，我可以把一些文本。 Here is picture to better describe what I want如果任何人都可以給我指導一個教程，或者告訴我如何做到這一點會很棒。圓形照片上的小覆蓋圖

來源

2016-12-21 Laurens

你能提供您已經編寫任何HTML/CSS？我們可以幫助您解決遇到的任何問題。 – chazsolo

@chazsolo我正在使用下面接受的答案中顯示的代碼。我現在想讓它響應，但我似乎無法做到。總是有一些不成比例的東西。 – Laurens

從你的其他評論，你是否說你想包含圓相對於窗口的大小擴大？ – chazsolo

.img-container { 
 
    border-radius: 100%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
.img-container > .caption { 
 
    background-color: #ff0000; 
 
    bottom: 0; 
 
    color: #fff; 
 
    height: 50px; 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
    z-index: 123; 
 
} 
 
.img-container > img { 
 
    max-height: 100%; 
 
    width:auto; 
 
}

<div class="img-container" > 
 

 
<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg"> 
 

 
<div class="caption" >CAPTION</div> 
 

 
</div>

我認爲你正在尋找這個..

來源

2016-12-21 01:20:32

非常感謝。我現在應該能夠看到並按照我需要的方式進行定製。 – Laurens

我確實接受它。我還有一個問題要問你。你知道如何使這種響應。我一直在玩弄它，但似乎無法讓它響應。我希望它能夠與頁面一起縮放，這樣無論您使用哪個屏幕，它都會佔用相同的空間量。 – Laurens

圓形照片上的小覆蓋圖

回答

相關問題