Umriss der Grenze in css

Ich bin neu mit CSS, aber die Sache, die ich versuche zu tun ist etwas kompliziert, zumindest für mich. Ich habe ein Bild, das ich mit einem Kreis, transparent von innen, schwarz von außen abdecken möchte. das ist, was ich bisher erreicht:Umriss der Grenze in css

.roundedBorder { 
 
    border: 1px solid #1EC865; 
 
    border-width: 4px; 
 
    border-radius: 81px; 
 
} 
 
.img { position:absolute; top:6px; left:6px; width:81px; 
 
}

<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> 
 
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> 
 
</div>

https://jsfiddle.net/dmL56kek/

jetzt suche ich nach dem äußeren Kreis mit einer Farbe zu bedecken.

PS: Ich möchte keinen Stil auf das Bild anwenden, weil es in meinem Fall nicht funktioniert.

Quelle

2016-08-09 malek yahyaoui

Warum nicht nur geben Sie Ihr Bild einen 'border-radius: 100%'? – AliIshaq

https://jsfiddle.net/CRafT/dmL56kek/1/ –

wie ich sage, es ist kompliziert, ich benutze einen cropper und versuche, den Ausschnitt Bereich mit dem pluguin, das Vorschaubild, das ist das Bild, das ich bin zu versuchen, nicht zu handeln, wird tatsächlich durch das Plugin wie dieses

generiert –

Eine kleine Änderung ist css würde helfen und ich habe width:78px mit einer Berechnung verwendet, dass die Breite der äußeren div ist 70px und Grenze ist 4px von links und rechts.

.roundedBorder { 
 
    border: 1px solid #1EC865; 
 
    border-width: 4px; 
 
    border-radius: 81px; 
 
} 
 
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}

<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> 
 
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> 
 
</div>

Quelle

2016-08-09 08:13:52

Antwort

Verwandte Themen