web-dev-qa-db-fra.com

Superposition d'images CSS avec couleur et transparence

J'essaie de comprendre si je peux ajouter une superposition à une image comme une teinte et changer l'opacité sans ajouter de couleur d'arrière-plan. Je n'ai pas eu de chance alors j'ai pensé que je demanderais ici.
Je voudrais le rendre rouge avec cette opacité. voici ce que j'ai jusqu'à présent .

J'ai créé une image pour la superposer si je dois appeler overlay.png mais je ne sais pas si c'est nécessaire.

img.highlighted {
   opacity:0.4;
}

Fondamentalement, je veux faire cela, mais inverser, pour que l'image se teinte en vol stationnaire pour ne pas enlever la teinte en vol stationnaire.
Vérifiez le ici
http://jsbin.com/igahay/3011/edit

htmlcssimagecss3
18
srtstripes

Effets de filtre CSS

Ce n'est pas une solution entièrement multi-navigateurs , mais doit bien fonctionner dans la plupart des navigateurs modernes.

<img src="image.jpg" />
<style>
    img:hover {
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
        -webkit-filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
        /* FF 35+ */
        filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
    }
</style>

TERRAIN DE DÉMO EXTERNE

SNIPPET DEMO INTERNE (source: simpl.info )

#container {
  text-align: center;
}

.blur {
  filter: blur(5px)
}

.grayscale {
  filter: grayscale(1)
}

.saturate {
  filter: saturate(5)
}

.sepia {
  filter: sepia(1)
}

.multi {
  filter: blur(4px) invert(1) opacity(0.5)
}
<div id="container">

  <h1><a href="https://simpl.info/cssfilters/" title="simpl.info home page">simpl.info</a> CSS filters</h1>

  <img src="https://simpl.info/cssfilters/balham.jpg" alt="No filter: Balham High Road and a Rainbow" />
  <img class="blur" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur filter: Balham High Road and a Rainbow" />
  <img class="grayscale" src="https://simpl.info/cssfilters/balham.jpg" alt="Grayscale filter: Balham High Road and a Rainbow" />
  <img class="saturate" src="https://simpl.info/cssfilters/balham.jpg" alt="Saturate filter: Balham High Road and a Rainbow" />
  <img class="sepia" src="https://simpl.info/cssfilters/balham.jpg" alt="Sepia filter: Balham High Road and a Rainbow" />
  <img class="multi" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur, invert and opacity filters: Balham High Road and a Rainbow" />

  <p><a href="https://github.com/samdutton/simpl/blob/gh-pages/cssfilters" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a></p>

</div>

[~ # ~] notes [~ # ~]

  • Cette propriété est très différente et incompatible avec Microsoft ancienne propriété "filter"
  • Edge , l'élément ou son parent ne peut pas avoir un z-index négatif (voir bug )
  • [~ # ~] c'est-à-dire [~ # ~] utiliser la méthode old school ( link )  merci @Costa

[~ # ~] ressources [~ # ~] :

18
gmo

Démo JSFiddle

[~ # ~] html [~ # ~] :

<div class="image-holder">
    <img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>

[~ # ~] css [~ # ~] :

.image-holder {
    display:inline-block;
    position: relative;
}
.image-holder:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: blue;
    opacity: 0.1;
}
.image-holder:hover:after {
    opacity: 0;
}
10
Girisha C

Si vous voulez faire l'inverse de ce que vous avez montré, pensez à faire ceci:

.tint:hover:before {
    background: rgba(0,0,250, 0.5);

  }

  .t2:before {
    background: none;
  }

et regardez l'effet sur la 2ème photo.

Est-il censé ressembler à this ?

3
Hristo Valkanov

Avez-vous essayé Filtres Webkit?

Vous pouvez manipuler non seulement l'opacité, mais aussi la couleur, la luminosité, la luminosité et d'autres propriétés:

1
acudars

quelque chose comme ça? http://codepen.io/Nunotmp/pen/wKjvB

Vous pouvez ajouter un div vide et utiliser le positionnement absolu.

1
Juan Rangel