Jak zrobić ślimaka css?

Question

Mam obraz, który chciałbym wyświetlić jako koło z (border-radius:50%) iw tym samym wierszu chciałbym mieć tekst o ustawionej szerokości i tła. Nie chciałbym twardo kodować żadnych wartości. Jaki jest najlepszy sposób na osiągnięcie tego?

Oto obraz

fiddle

<div class="header"> 
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> 
    <p class="headingText">Hello</p> 
</div> 

.i { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
} 

.headingText { 
    color: white; 
    background: black; 
    display: inline-block; 
    width: 350px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
} 

Answer 1

można spróbować coś takiego:

.header 
{ 
    padding-top:26px; 
    padding-left:40px; 
    position:relative; 
} 
.i 
{ 
    position:absolute; 
    width:80px; 
    height:80px; 
    border-radius:50%; 
    top:0; 
    left:0; 
} 

.headingText 
{ 
    color:white; 
    background:black; 
    display:inline-block; 
    width:350px; 
    padding-top:10px; 
    padding-bottom:10px; 
    text-align:center; 
} 

Answer 2

użyć elementu bloku zamiast z ujemną marżą na górę (połowa rozmiaru koła - połowa wypełnienia) i margines w lewo (pół koła). Wystarczy zmienić:

.headingText { 
    /*display: inline-block;*/ 
    display: block; 
    margin-top: -45px; 
    margin-left: 40px; 
} 

Przykład skrzypce: https://jsfiddle.net/c67dchhv/

Answer 3

Wystarczy dodać position: absolute w i klasy następnie kontrolować margines headingtext:

HTML:

<div class="header"> 
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> 
    <p class="headingText">Hello</p> 
</div> 

CSS:

.i 
{ 
    width:80px; 
    height:80px; 
    border-radius:50%; 
    position: absolute; 
} 

.headingText 
{ 
    color:white; 
    background:black; 
    display:inline-block; 
    width:350px; 
    padding-top:10px; 
    padding-bottom:10px; 
    text-align:center; 
    margin: 40px 0 0 37px; 
} 

FIDDLE

Answer 4

tylko prosty make .header class position:relative; jeśli chcesz zdefiniować dowolną wysokość i szerokość można, .i class position:absolute; dać margines na .headingtext classhttps://jsfiddle.net/hamzanisar/aphzeyyt/ może będzie to pomocne dla Ciebie.

Answer 5

Korzystanie z pseudo-klas i pozycjonowania absolutnego pozwala uzyskać pożądany efekt.

Poniższa odpowiedź wykorzystuje istniejący kod HTML, więc nie musisz zmieniać żadnego z nich i po prostu zmieniasz swój CSS.

Możesz dodać nieco dopełnienia do tekstu, aby w razie potrzeby był nieco bardziej rozłożony, a tło powinno się samo uporządkować.

.header { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 30px; 
 
    overflow: visible; 
 
} 
 
.header img.i { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    bottom: 16px; 
 
    left: -40px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    border: 3px solid black; 
 
} 
 
.header p.headingText { 
 
    padding: 16px 32px 16px 80px; 
 
    color: black; 
 
    border: 3px solid black; 
 
}

<div class="header"> 
 
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" /> 
 
    <p class="headingText">Hello</p> 
 
</div>