BoxShadow: inset im img-tag
Ich versuche zu schaffen, ein Reliefeffekt auf ein Bild (wie eine polaroid). so sollte es sein, eine box-shadow auf den oberen und den linken Rand insetted auf das Bild. Dies funktioniert jedoch nicht... ist das ein browser-problem:
Habe ich einen jsfiddle http://jsfiddle.net/PEgBv/25/ zu zeigen, was ich will.
Ich wie es wie auf das zweite div-box (wo es funktioniert). Aber auf die Bilder, die Schatten nur angezeigt wird, ohne die inset Attribut.
Arbeiten mit chrome14 auf linux
habe gerade versucht unter win7 mit ie9, ff6, chrome14 und safari... auch nicht funktioniert!
Ich weiß nicht, ob ich nennen es ein browser-problem. Die Bilder sind nur gerendert, auf der Oberseite der Schatten, so dass es nicht erscheint. Sie können sagen, wenn Sie transparente Bilder
Wenn du dir bei deinem Beispiel zu eng, werden Sie sehen, dass der text
Ich weiß nicht, ob ich nennen es ein browser-problem. Die Bilder sind nur gerendert, auf der Oberseite der Schatten, so dass es nicht erscheint. Sie können sagen, wenn Sie transparente Bilder
Wenn du dir bei deinem Beispiel zu eng, werden Sie sehen, dass der text
foo gerendert wird auf der Oberseite, auch.InformationsquelleAutor itshorty | 2011-10-04
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
CSS3 inset-Schatten werfen keine Bilder Bearbeiten, aber es gibt einen workaround,
Prüfen Sie hier: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
InformationsquelleAutor gtamil
Die Umgehungsmöglichkeit funktioniert nicht für Bilder, die mit
max-width: 100%;undheight: auto;die Häufig verwendet werden, in fluid-designs zu machen, die Bilder skalieren sich automatisch, bis Sie Ihre ursprüngliche Breite. Um die umliegenden<a>(oder was auch immer element) zu erweitern, um alle den Inhalt (das Bild), die Sie brauchen, um hinzuzufügen, display: inline-block;, sonst werden die Schatten nicht angezeigt, wie erwartet.So, in Ergänzung zu den styles, die in der vorgeschlagenen workaround
display: inline-block;sollte Hinzugefügt werden, um die Klasse.img-shadow.InformationsquelleAutor Grantzau
Wird es funktionieren, wenn du das Bild auf einem hintergrund. Anstatt also mit img-tag verwenden
background-image: url(source.jpg);entweder in css-Datei oder ein style-Attribut. Box-shadow ist die Darstellung auf dem hintergrund.InformationsquelleAutor Nerva