円形写真の小さいオーバーレイ

こんにちは私は個人的なウェブサイト上で働いていて、私はいくつかのテキストを置くことができます〜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

円形写真の小さいオーバーレイ

答えて

関連する問題