Bootstrap Karussell Bild aus Rahmen

Question

Ich habe Probleme mit Bootstrap Karussell. Ich habe Kanten an meinem Karussell abgerundet, aber wenn das Bild verschoben wird, erscheint die Ecke des Bildes. Ich kann es nicht mit Worten erklären.

Hier ist ein Normal-und korrektes Bild Karussell mit abgerundeten Kanten.

Aber wenn Bild Dias auf ein anderes Bild, es geht aus dem Rahmen und macht einen soliden Rand. Gibt es eine Möglichkeit, dies mit Bootstrap 3 zu beheben?

Danke, Ričards.

Answer 1

Ich glaube, die "festen Kanten", die Sie sehen, sind die halbtransparenten "Kontrollen". Ich habe sie übertrieben, um den Effekt deutlicher zu machen. Sie werden wahrscheinlich ihr Styling auf etwas mehr nach Ihrem Geschmack anpassen möchten. Ich würde empfehlen, den Gradientenhintergrund zu entfernen und stattdessen einen Textschatten zu verwenden, um die Steuerung hervorzuheben.

.carousel { 
 
    padding-top: 1em; 
 
    padding-bottom: 1em; 
 
    width: 350px; 
 
    margin: auto; 
 
    background-color: transparent; 
 
} 
 

 
.carousel .item img { 
 
    border-radius: 64px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"><img src="http://placehold.it/350x150" alt="..."></div> 
 
    <div class="item"><img src="http://placehold.it/350x150" alt="..."></div> 
 
    <div class="item"><img src="http://placehold.it/350x150" alt="..."></div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 

 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>