web-dev-qa-db-fra.com

Images de fond: comment remplir une image entière si l'image est petite et vice versa

J'ai trois problèmes:

  1. Lorsque j'ai essayé d'utiliser une image d'arrière-plan dans un div de taille inférieure, le div ne montre qu'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 utiliser dans une plus grande div. Mais vous ne voulez pas utiliser la fonction de répétition.

  3. Est-il possible en CSS de manipuler l'opacité d'une image?

cssbackground-imageopacity
68
Aakash Sahai

Redimensionnez l'image pour l'adapter à la taille du div.
Avec CSS3, vous pouvez faire ceci:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

Comment étirer une image d'arrière-plan dans une page Web :

A propos de l'opacité

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Ou regardez Opacité/Transparence de l'image CSS

112
yossi

Pour agrandir automatiquement l'image et couvrir toute la section div sans en laisser aucune partie non remplie, utilisez:

background-size: cover;
67
Ouadie

Cela a fonctionné parfaitement pour moi

background-repeat: no-repeat;
background-size: 100% 100%;
16
Dnyaneshwar Harer

Essayez ci-dessous le segment de code, j'ai déjà essayé moi-même:

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

Plutôt que de donner background-size:100%;
Nous pouvons donner background-size:contain;
Vérifiez ceci pour différentes options disponibles: http://www.css3.info/preview/background-size/

8
vivekj011

Cela fonctionnera comme un charme.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
4
Jayanta Biswas

  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, celle-ci étant un peu inflexible 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 background-position:

    #yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

  3. Identique à la première partie de (1) l’image s’adaptera à la division, donc plus grand ou plus petit fonctionnera

  4. Identique à celle de Yossi.

0
Bazzz