Bootstrap-Bild Kreis-Schatten Nach Innen

Wie kann ich fügen Sie einen inneren Schatten, um eine bootstrap-image "Kreis"?

jsfiddle

Dieser funktioniert nicht..

<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"><img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">

.box-shad {box-shadow:
    0 10px 20px #777 inset,
    0 0 200px #000 inset,
    0 0 150px #000 inset,
    0 0 100px #000 inset;}

Vielen Dank für alle Ideen.

LÖSUNG:

Legen Sie die box Schatten auf ein rundes div mit Hintergrundbild festlegen, um das Bild, anstatt ein Bild.

  • Ich glaube nicht, dass Sie hinzufügen können, einen Schatten zu einem Bild ohne javascript, können Sie fügen Sie den code in ein div zu sehen, es funktioniert
  • Ok, irgendwelche Vorschläge, wie man es mit js? Es würde helfen, zu sehen, es in der Fiedel
InformationsquelleAutor Nick B | 2014-01-23
  1. 2

    Können Sie versuchen, so etwas wie dieses:

    .box-shad {
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

    Demo: http://jsfiddle.net/52VtD/1926/

    UPDATE

    Ich glaube nicht, dass es moeglich inneren Schatten, weil es ein Bild ist; ziehen Sie den Kreis auch statt eines Bildes verwenden, so dass Sie festlegen können, den inneren Schatten.

    Code:

    .box-shad {
    -webkit-box-shadow: inset 0 0 4px #000;
    -moz-box-shadow: inset 0 0 4px #000;
    box-shadow: inset 0 0 4px #000;
}
.circle {
    width: 140px;
    height: 140px;
    display: inline-block;
    border-radius: 50%;
    background-color: #aaa;
}

    Demo: http://jsfiddle.net/52VtD/1943/

    • Vielen Dank für die Ideen, aber ich bin auf der Suche für einen inneren Schatten.. Irgendwelche Gedanken?
    • Ich glaube es ist nicht moeglich, weil es ein Bild ist, eine alternative sehen Sie in den Bearbeiten
    • wie über das hinzufügen, um Ihre Klasse circle background-image: url(placehold.er/140x140);? Sie bekam Bild mit Schatten nach innen
    • Ja, eine Kombination dieser und @schrodingercat Kommentar hat Super geklappt.
    InformationsquelleAutor Irvin Dominin
  2. 2

    Das funktioniert für mich. Bitte versuchen Sie es.

    CSS:

    .inner-shadow {
  box-shadow: inset 3px 3px 4px black;
  border-radius: 50%;
}
img {
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: -10;
}

    HTML:

    <div class="inner-shadow">
	<img src="http://placehold.it/300x300" alt="">
</div>

    InformationsquelleAutor wataru
  3. 0

    Nächste, den ich bekommen, ist dies:

    http://jsfiddle.net/52VtD/1941/

    <div class="border">
<a class="shadow img-circle"><img class="img-circle"  src="http://placehold.it/140x140" /></a>

    CSS:

    .border
{
    padding:10px;
    width:160px;        
}

.shadow
{
    display:block;
    position:relative;
}

.shadow img
{
    display:block;       
}

.shadow::before
{
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
    box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
}

    dieser Artikel kann helfen, http://designbystevie.com/2011/03/applying-css3-inset-box-shadows-to-images/

    InformationsquelleAutor Liam Kenneth
Schreibe einen Kommentar