css - fond - mettre une image en arriere plan html




Images d'arrière-plan: comment remplir toute div si l'image est petite et vice versa (5)

  1. Je suis d'accord avec l'exemple de Yossi, étirer l'image pour l'adapter à la div, mais d'une manière légèrement différente (sans image d'arrière-plan, car cela est un peu rigide dans CSS 2.1). Afficher l'image complète:

    <div id="yourdiv">
        <img id="theimage" src="image.jpg" alt="" />
    </div>
    
    #yourdiv img {
        width:100%;
      /*height will be automatic to remain aspect ratio*/
    }
    
  2. Afficher une partie de l'image en utilisant la position d'arrière-plan:

    #yourdiv 
    {
        background-image: url(image.jpg);
        background-repeat: no-repeat;
        background-position: 10px 25px;
    }
    
  3. Identique à la première partie de (1) l'image sera redimensionnée à la div si plus ou moins grande travaillera

  4. Identique à celui de Yossi.

J'ai trois problèmes:

  1. Lorsque j'ai essayé d'utiliser une image d'arrière-plan avec une div plus petite, le div affiche uniquement une partie de l'image. Comment puis-je afficher l'intégralité ou une partie spécifique de l'image?

  2. J'ai une image plus petite et je veux l'utiliser dans une plus grande div. Mais ne voulez pas utiliser la fonction de répétition.

  3. Existe-t-il un moyen dans CSS pour manipuler l'opacité d'une image?


Cela a parfaitement fonctionné pour moi

background-repeat: no-repeat;
background-size: 100% 100%;

Essayez ci-dessous le segment de code, je l'ai essayé moi-même avant:

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}






opacity