Comment ajouter une image de fond à un bouton en CSS (explication détaillée et exemples)

L'article ici peut ajouter de belles images avec des boutons, vous permettant de changer facilement le style de la page. Vous pouvez utiliser un arrière-plan dégradé ; l'arrière-plan du bouton peut changer la couleur du bouton ; vous pouvez utiliser overflow : masqué et supprimer le masque.

Utilisez le haut, la gauche, la droite ici , en bas pour ajuster la hauteur et la largeur pour couvrir le bouton, ainsi que le dégradé et la transparence mentionnés ci-dessus. Nous divisons le masque en parties supérieure et inférieure. La partie supérieure utilise un fond dégradé et celle du bas n'a besoin que d'une couleur unie (en fait, cela peut également être réalisé avec un seul masque, mais il n'y a aucun moyen de le faire. la bordure du dégradé du masque, utilisez donc deux ). Le code est comme ceci : Le code CSS est le suivant :

.mask-t, .mask-b {
  position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 50%;
   
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;  
   
  background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
  );
     
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
  top: 50%;
  left: 1px;
  right: 1px;
  bottom: 0;
   
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px 0 0;  
   
  background: rgba(0, 0, 0, .3);
     
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

En fait, je ne comprends pas bien comment utiliser le dégradé CSS3, donc je ne l'expliquerai pas ici de peur de me tromper. Ce faisant, j'ai suivi les exemples de la documentation officielle.

Gecko : https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
WebKit : http://webkit org/. blog/175/introducing-css-gradients/

OK, le calque de masque est terminé, créons ensuite le bouton. Le calque du bouton doit fournir le positionnement du masque et définir la taille et la couleur du bouton. Par souci de beauté, nous y ajoutons des coins arrondis et des ombres, ce qui est également le contenu de CSS3. Voici le code : Le code CSS est le suivant :

.button {
  position: relative;
  background: red;
  width: 160px;
  height: 40px;
  line-height: 40px;
   
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

Changez l'arrière-plan de .button pour changer la couleur du bouton. Notez que le rayon de bordure du bouton doit être défini pour être le même que celui du calque de masque. J'ai essayé d'ajouter overflow: caché au bouton, puis de supprimer le rayon de bordure du masque. Malgré cela, les quatre coins. du masque sont toujours affichés. Pourquoi ? Veuillez demander conseil à des experts. Ensuite, il y a la partie texte du bouton. Ce calque doit être au-dessus du calque de masque afin que le texte puisse être clairement affiché. Comme pour le calque de masque, définissez le positionnement absolu et définissez la hauteur et la largeur à 100 %. Étant donné que notre calque de texte se trouve derrière le calque de masque dans le flux de documents, il n'est pas nécessaire de définir un z-index. Le code est le suivant : Le code CSS est le suivant :

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

À ce stade, notre bouton est prêt. L'avantage de ce bouton est qu'il n'utilise pas d'images, réduit le nombre de connexions HTTP et bien sûr réduit le trafic. L'inconvénient est que ce bouton est peu utile actuellement, car IE ne prend pas encore en charge CSS3. Bien qu'il existe des filtres, il n'est pas aussi rapide que l'utilisation d'images. J'aimerais qu'IE soit bientôt éliminé.

Apprentissage recommandé : Tutoriel vidéo CSS p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!