web-dev-qa-db-fra.com

Comment superposer une image à une couleur en CSS?

Objectif

Je veux une superposition de couleur sur cet élément d'en-tête. Comment puis-je faire cela avec CSS?

Code

HTML

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }
htmlcsshtml5css3overlay
39
LittleLebowski

Vous devez utiliser rgba pour superposer votre élément avec photos.rgba est un moyen de déclarer une couleur en CSS qui prend en charge la transparence alpha. vous pouvez utiliser .row comme superposition comme ceci:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}
49
Ramin
#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

Quelque chose comme ça. Ajoutez simplement la classe overlay à l'en-tête, évidemment.

6
DevlshOne

Vous pouvez utiliser une bordure semi-transparente superthick négative ...

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}
<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

Cette solution nécessite que vous connaissiez les dimensions exactes de l'objet couvert.

5
elixon

Utilisez plusieurs références sur l'élément et utilisez un dégradé linéaire en tant que superposition de couleur en déclarant que les arrêts de couleur de début et de fin sont identiques.

Notez que les couches d'une déclaration multi-arrière-plan sont lues de la même manière que leur rendu, de haut en bas. Placez donc votre calque en premier, puis votre image bg:

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}
2
mindfullsilence

Vous pouvez utiliser la fonction hue-rotate dans la propriété filter. C'est une mesure assez obscure cependant, vous devez savoir combien de degrés autour de la roue chromatique vous devez déplacer pour arriver à la teinte désirée, par exemple:

header { filter: hue-rotate(90deg); }

Une fois que vous avez trouvé la bonne teinte, vous pouvez combiner les fonctions brightness et grayscale ou saturate pour trouver la bonne teinte, par exemple:

header { filter: hue-rotate(90deg) brightness(10%) grayscale(10%); }

La propriété filter a un préfixe de vendeur dans Webkit. Le code final serait donc:

header { -webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%); filter: hue-rotate(90deg) brightness(10%) grayscale(10%); }

1
Lewis Donovan

Si le positionnement absolu ne vous dérange pas, vous pouvez positionner votre image d'arrière-plan, puis ajouter une superposition en utilisant l'opacité.

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

Voir ici: http://jsfiddle.net/4yh9L/

0
Conqueror

Dans helpshift, ils utilisaient la classe home-page comme

HTML

<div class="page home-page">...</div>

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

tu peux essayer pareil comme ça

0
Thillai Narayanan