web-dev-qa-db-fra.com

Badge CSS sur l'image avec Bootstrap

J'essaie de placer un badge de style "notification" sur une image. J'utilise Twitters Bootstrap comme infrastructure de base et crée une classe CSS personnalisée appelée notify-badge. Mais je ne peux rien obtenir pour s'aligner correctement.

À travers la magie de Photoshop, voici ce que j'essaie d'accomplir.  enter image description here

Voici mon code CSS.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

Je voudrais pouvoir placer n'importe quel petit texte sur l'insigne et élargir le cercle rouge pour l'ajuster.

Voici mon code HTML.

<div class="col-sm-4">
 <a href="#">
     <span class="notify-badge">NEW</span>
     <img src="myimage.png"  alt="" width="64" height="64">
 </a> 
    <p>Some text</p>
</div>

MODIFIER: 

Voici l'image avec la réponse de APAD1.

 enter image description here

L'ajout de margin-top:-20px; à .item a résolu le problème d'alignement.

 enter image description here

htmlcsstwitter-bootstrap
16
user-44651

Un tas de différentes façons que vous pouvez accomplir cela. Cela devrait vous aider à démarrer:

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
  	<div class="item">
  		<a href="#">
			<span class="notify-badge">NEW</span>
      		<img src="http://placehold.it/200x200"  alt="" />
		</a>
	</div>
</div>

34
APAD1

L'idée ici est de superposer un conteneur absolu sur un conteneur relatif. Voici un exemple similaire:

<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

Le CSS:

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

Cela mettra notre texte directement au-dessus de l'image, mais cela n'accomplira pas la boîte que nous voulons réaliser derrière le texte. Pour cela, nous ne pouvons pas utiliser le h2, car il s'agit d'un élément de niveau bloc et nous avons besoin d'un élément inline sans largeur spécifique. Alors, enveloppez le h2 à l'intérieur d'une travée.

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Puis utilisez cette étendue pour le style et le texte:

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Pour savoir comment assurer un espacement correct ou utiliser jQuery pour nettoyer un peu le code en vous permettant de supprimer certaines balises du code et de les remettre en arrière, consultez la commande source .

1
noctrnal

Voici un violon que j'ai créé avec l'exemple de code:

https://jsfiddle.net/un2p8gow/

  • J'ai changé le notify-badge en div. Je n'ai vu aucune raison pour que ce soit une durée.

  • J'ai changé la position en parent. Modifier - vous pouvez en fait conserver l’attribut position: absolute; à condition de savoir ce que vous en faites. Guy dans les commentaires avait raison.

  • Vous aviez l'attribut right: 1.5rem; et je l'ai simplement changé en left car il était inséré dans le sens opposé de votre exemple.

Vous pouvez le modifier davantage, mais dans le vide, c'est ce que vous voulez.

0
TRose