Assombrir l'image d'arrière-plan sur le vol stationnaire

Comment aurais-je foncer un image d'arrière-plan sur le vol stationnaire sans de faire une nouvelle image plus sombre?

CSS:

.image {
  background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
  width: 58px;
  height: 58px;
}

JSFiddle lien: http://jsfiddle.net/qrmqM/1/

InformationsquelleAutor John Smith | 2013-07-05
  1. 38

    Comment à ce sujet, à l'aide d'une superposition?

    .image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

    Démo

    • Avez-vous une idée pour les images qui ne sont pas une forme régulière?. J'ai quelques pentagone icônes que je veux animer sur un clic, vous pouvez donc avoir que "en appuyant sur un bouton de sentir". je me demande si je devrais faire un autre img pour chacune des icônes, ou peut-être que je pourrais le faire avec une transparente.
    InformationsquelleAutor PSL
  2. 52

    Similaire, mais encore une fois un peu différent.

    Rendre l'image à 100% d'opacité, il est donc clair.
    Et puis sur hover img réduire l'opacité que vous voulez. Dans cet exemple, j'ai également ajouté un assouplissement pour une belle transition.

    img {
    -webkit-filter: brightness(100%);
}

img:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

    Qui le fera, Espérons que cette aide.

    Merci Robert Byers pour votre jsfiddle

    • C'est la seule réponse qui fonctionne pour n'importe quelle forme d'image. Certains des autres réponses ont des trucs qui ne fonctionnera que si votre image est rectangulaire ou circulaire. Mais cela fonctionne parfaitement pour n'importe quelle forme. Cette réponse manque juste un violon. Ici: jsfiddle.net/cmL1tsjh
    • Fonctionne comme un charme! La seule chose que je vous suggère de change, c'est de déplacer toutes les transitions à la img, comme l'assouplissement des coupes lorsque vous déplacez votre curseur hors de l'image.
    • Notez que cela ne fonctionne pas sur IE11 si vous avez le malheur d'avoir à le supporter.
    InformationsquelleAutor Sabba Keynejad
  3. 17

    Si vous voulez assombrir l'image, l'utilisation d'un élément de superposition avec rgba et opacity propriétés qui va s'assombrir votre image...

    Démo

    <div><span></span></div>

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div span {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover span {
    opacity: 1;
}

    Remarque: Suis également à l'aide de transitions CSS3 pour un bon effet sombre

    Si quelqu'un à sauver un élément supplémentaire dans le DOM que vous pouvez utiliser :before ou :after pseudo ainsi..

    Demo 2

    div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover:after {
    opacity: 1;
}

    À l'aide de certains contenus sur le sombre superposition de l'image

    Suis ici à l'aide de CSS techniques de Positionnement avec z-index à la superposition de contenu sur le sombre div élément.
    Démo 3

    div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
    position: relative;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    top: 0;
    left: 0;
    position: absolute;
}

div:hover:after {
    opacity: 1;
}

div p {
    color: #fff;
    z-index: 1;
    position: relative;
}
    InformationsquelleAutor Mr. Alien
  4. 7

    Vous pouvez utiliser l'opacité:

    .image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.5;
}

.image:hover{
    opacity:1;
}

    JSFiddle

    • Que faire si je veux garder l'original de l'opacité et de la rendre plus sombre lorsque planait au-dessus?
    • Ensuite, vous pouvez utiliser une autre image, qui est plus foncée , ou de mettre un conteneur parent et ensuite foncer que le conteneur ( pas sur l'image ) .
    InformationsquelleAutor Vucko
  5. 3

    vous pouvez utiliser ceci: 

    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

    comme vu sur: https://stackoverflow.com/a/24084708/8953378

    • C'est agréable quand vous voulez juste pour assombrir la couleur, mais ne sais pas la couleur encore et ne peut pas changer l'opacité pour d'autres raisons
    • C'est une très belle solution qui a une grande prise en charge du navigateur et de l'est de l'omi mieux que d'utiliser une transformation ou d'une superposition. Fonctionne sur tous les navigateurs ET automatiquement a la bonne border-radius et de l'est couleur agnostique qui est excellente!!
    InformationsquelleAutor Alon Gouldman
  6. 2

    Ajouter css:

    .image{
    opacity:.5;
}

.image:hover{
    //CSS properties
    opacity:1;
}
    • Comment sur sans en faire une nouvelle image?
    InformationsquelleAutor Mohit Bhansali
  7. 2

    essayer cette

    http://jsfiddle.net/qrmqM/6/

    CSS

    .image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
      opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;

    border-radius:100px;
  opacity:1;
            filter:alpha(opacity=100);

}

    HTML

    <div class="image"></div>
    InformationsquelleAutor Falguni Panchal
  8. 2

    Essayer de code suivant:

    .image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.2;
}

.image:hover{
    opacity:1;
}
    InformationsquelleAutor enam
  9. 1
    .image:hover {
   background: #000;
    width: 58px;
    height: 58px;
    border-radius:60px;

}

    Vous obtiendrez assombrir

    • Comment sur sans en faire une nouvelle image?
    InformationsquelleAutor Praveen
  10. 1

    La façon la plus simple de le faire sans ajouter un élément de superposition, ou à l'aide de deux images, est d'utiliser :avant ou :après sélecteur. 

    .image {
    position: relative;
}
.image:hover:after {
    content: ""; 
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    top: 0;
    left:0;
}

    Cela ne fonctionnera pas dans les navigateurs plus anciens, bien sûr; il suffit de dire qu'il ne se dégrade gracieusement!

    InformationsquelleAutor machinat
  11. 0

    Si vous devez utiliser l'image actuelle et obtenir une image plus sombre, alors vous devez en créer un nouveau. Sinon vous pouvez simplement réduire l'opacité de l' .l'image de la classe et de la dans le .image:hover vous pouvez mettre une valeur plus élevée pour l'opacité. Mais alors l'image sans hover aurait l'air pâle.

    La meilleure façon serait de créer deux images et ajoutez les éléments suivants :

    .image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.9;   
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook_hover.png');
}
}
    InformationsquelleAutor Roy M J
  12. 0

    Je voudrais ajouter un div autour de l'image et de faire le changement d'image de l'opacité sur le vol stationnaire et ajoutez un encart de zone d'ombre à la div sur le vol stationnaire.

    img:hover{
    opacity:.5;
}
.image:hover{
    box-shadow: inset 10px 10px 100px 100px #000;
}

<div class="image"><img src="image.jpg" /></div>
    InformationsquelleAutor daniella
  13. 0

    J'ai été en mesure de parvenir plus facilement que les réponses ci-dessus, et en une seule ligne de code à l'aide de la nouvelle Filtre CSS.

    C'est la compatibilité des navigateurs modernes est assez bonne - 95% au moment de l'écriture, mais moins que les autres réponses.

    CSS:

    img:hover{
  filter: brightness(50%);
}

    HTML:

    <img src='https://via.placeholder.com/300'>

    InformationsquelleAutor Rory
  14. -2

    Juste essayer ce code.

    img:hover
{
    box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -webkit-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -moz-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset; 
    -o-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
}
    InformationsquelleAutor rahul thakur