web-dev-qa-db-fra.com

Puis-je définir une opacité uniquement sur l'image d'arrière-plan d'une div?

Disons que j'ai

<div class="myDiv">Hi there</div>

Je veux mettre un background-image et donnez-lui un opacity de 0.5 - mais je veux que le texte que j'ai écrit ait une opacité totale (1).

Si j'écris le CSS comme ça

.myDiv { opacity:0.5 }

tout sera dans une faible opacité - et je ne le veux pas.

Ma question est donc la suivante: comment obtenir une image d’arrière-plan à faible opacité avec un texte à pleine opacité?

htmlcsscss3backgroundbackground-image
71
Alon

Non, cela ne peut pas être fait car opacity affecte tout l'élément, y compris son contenu, et il n'y a aucun moyen de modifier ce comportement. Vous pouvez contourner ce problème avec les deux méthodes suivantes.

Division secondaire

Ajoutez un autre élément div au conteneur pour conserver l’arrière-plan. Cette méthode est la plus conviviale pour tous les navigateurs et fonctionnera même sur IE6.

[~ # ~] html [~ # ~] 

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

[~ # ~] css [~ # ~] 

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

Voir scénario de test sur jsFiddle

: avant et :: avant pseudo-élément

Une autre astuce consiste à utiliser les pseudo-éléments CSS 2.1 :before Ou CSS 3 ::before. Le pseudo-élément :before Est pris en charge dans IE à partir de la version 8, alors que le pseudo-élément ::before N'est pas pris en charge. Cela sera corrigé dans la version dix.

[~ # ~] html [~ # ~] 

<div class="myDiv">
    Hi there
</div>

[~ # ~] css [~ # ~] 

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Notes complémentaires

En raison du comportement de z-index, Vous devrez définir un index z pour le conteneur ainsi qu'un négatif z-index Pour l'image d'arrière-plan.

Cas de test

Voir test case sur jsFiddle:

84
mekwall

Donc, voici une autre manière:

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
120
GrmXque

css

div { 
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div::after {
    content: "";
    background: url(image.jpg); 
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

html

<div> put your div content</div>
2
Harsukh Makwana
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>

y compris 4 ensembles de nombres le rend rgba, pas cmyk, mais dans tous les cas fonctionnerait (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

0
villager1

J'ai implémenté solution de Marcus Ekwall mais j'ai pu supprimer quelques éléments pour le rendre plus simple et cela fonctionne toujours. Peut-être que 2017 version de html/css?

html:

<div id="content">
  <div id='bg'></div>
  <h2>What is Lorem Ipsum?</h2>
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

css:

#content {
  text-align: left;
  width: 75%;
  margin: auto;
  position: relative;
}

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
  opacity: .4;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/abalter/3te9fjL5/

0
abalter

Aucune des solutions n'a fonctionné pour moi. Si tout le reste échoue, transférez l'image vers Photoshop et appliquez un effet. 5 minutes contre tant de temps sur ce ...

0
user2060451

Cela peut être fait en utilisant la classe div différente pour le texte Hi There ...

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

Maintenant, vous pouvez appliquer les styles au

étiquette. sinon pour la classe bg. Je suis sûr que ça marche bien

0
Supraja Machavaram

Bonjour à tous j'ai fait ça et ça a bien fonctionné

        var canvas, ctx;

                function init() {
                        canvas = document.getElementById('color');
                        ctx = canvas.getContext('2d');

                        ctx.save();
                        ctx.fillStyle = '#bfbfbf'; //  #00843D   // 118846
                        ctx.fillRect(0, 0, 490, 490);
                        ctx.restore();
                }
section{
                height: 400px;
                background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                position: relative;
        
}

canvas {
        width: 100%;
        height: 400px;
        opacity: 0.9;

}

#text {
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        text-align: center;
}


.middle{
        text-align: center;
        
}

section small{
        background-color: #262626;
        padding: 12px;
        color: whitesmoke;
  letter-spacing: 1.5px;

}

section i{
  color: white;
  background-color: grey;
}

section h1{
  opacity: 0.8;
}
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Metrics</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
</head>  
  
<body onload="init();">
<section>
<canvas id="color"></canvas>

<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics &amp; WEB</small>
</div>
</section>
0
adragom