Ich habe versucht, die Linien mit ähnlichen Bildern zu verschleiern:Wie man die Linie mit Bild bedeckt?
Im Folgenden ist der Code:
<html>
<style>
img {
border-radius:100%;
position:relative;
}
hr {
position:relative;
width:555px;
}
</style>
<body>
<center>
<img src="bat.jpg" width="150px" height="150px" />
<hr>
</center>
</body>
</html>
Ergebnis:
kann jemand helfen ?
So etwas wie dieses
div {
position: relative;
text-align:center;
}
img {
border-radius: 100%;
border:1px solid #000;
height:150px;
width:150px;
}
hr {
position: absolute;
width: 555px;
top:50%;
z-index:-1;
border-color: #000;
margin:0;
}<div>
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt="Image"/>
<hr>
</div>Das ist falsch. Attribute 'height' und' width' sind veraltet und enthalten keine Einheiten. Verwenden Sie stattdessen CSS. Denken Sie daran, das Attribut "alt" hinzuzufügen. '
@Raptor Aktualisierte Antwort, danke für Hilfe. –
@AbhishekPandey Danke! :) –
Siehe fiddle
HTML
<center>
<img src="https://imgs-tuts-dragoart-386112.c.cdn77.org/how-to-draw-batman-easy_1_000000011507_5.jpg" width="150px" height="150px" />
<hr>
</center>
CSS
center{position: relative;}
img {
border-radius:100%;
z-index: 1000;
position: relative;
}
hr {
position: absolute;
width: 555px;
top: 50%;
margin: 0px;
}
Das ist falsch. Attribute 'height' und' width' sind veraltet und enthalten keine Einheiten. Verwenden Sie stattdessen CSS. Das Attribut 'alt' fehlt ebenfalls. '
@Raptor Ich weiß aber schon benutzt von 'J. Daisy ist kein Code. –
Wie Sie sehen, wollen Sie die Grenze um das Bild, aber die Position, ich bin nicht sicher von Ihrer Anforderung.
<img src="something.jpeg" class="img"/>
Für eine einfache dünne Grenze:
img {
border:1px solid #021a40;
height:150px;
width:150px;
}
Die "Double Border":
img {
padding:1px;
border:1px solid #021a40;
height:150px;
width:150px;
}
Doppel Grenze mit unterschiedlicher Innenrandfarbe:
img {
padding:1px;
border:1px solid #021a40;
background-color:#ff0;
height:150px;
width:150px;
}
Das ist falsch. Attribute 'height' und' width' sind veraltet und enthalten keine Einheiten. Verwenden Sie stattdessen CSS. – Raptor
@Raptor, reparierte es. Ich wusste nicht, dass es veraltet war, aber danke für die Köpfe. – FreedomPride
fehlt auch ein Semikolon in der letzten Zeile von CSS. – Raptor
Hier ist eine Lösung mit relative Positionierung, mit Kommentaren in der CSS.
Der Trick ist:
relative Positionierungz-index ein Element vor den anderen zu setzen (erfordert absolute oder relative-Positionierungrelative Positionierung, top und left Anpassungen werden.display: block;width: …;margin: … auto; (von oben nach unten zu etwas, typischerweise 0; rechts-links zu auto).img {
border-radius:100%; \t \t /* \t display as circle \t */
position:relative; \t \t /* \t allow z-index \t \t */
border: 2px solid #666; \t \t /* \t display border \t \t \t \t \t */
z-index: 1000; \t \t \t /* \t display in front of hr \t */
background-color: white; \t \t /* \t just in case \t \t */
display: block; \t \t \t /* \t to allow centering \t */
width: 150px; \t \t \t /* \t same as width in img \t */
margin: 0 auto; \t \t \t /* \t horizontal centering \t */
}
hr {
position:relative; \t \t /* \t Allow adjustment below: \t */
top: -85px; \t \t \t /* \t Move up from default \t */
width: 555px;
height: 2px; \t \t \t /* \t cross-platform thickness \t */
border: none;
background: #666;
}<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" width="150" height="150">
<hr>
Hey wussten Sie, Sie können HTML/CSS/Javascript in Stackoverflow einbetten? – dwjohnston
Möchten Sie einen Rahmen um das Bild herum erstellen? – FreedomPride
@FreedomPride ja :) –