wake-up-neo.com

Kann ich eine Deckkraft nur für das Hintergrundbild eines Divs festlegen?

Sagen wir, ich habe

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

Ich möchte ein background-image und gib ihm ein opacity von 0.5 - aber ich möchte, dass der von mir geschriebene Text die volle Deckkraft hat (1).

Wenn ich das CSS so schreiben würde

.myDiv { opacity:0.5 }

alles wird in geringer Deckkraft sein - und das will ich nicht.

Meine Frage lautet also: Wie kann ich ein Hintergrundbild mit geringer Deckkraft und vollständigem Deckkrafttext erhalten?

71
Alon

Nein, dies ist nicht möglich, da opacity das gesamte Element einschließlich seines Inhalts betrifft und es keine Möglichkeit gibt, dieses Verhalten zu ändern. Sie können dies mit den beiden folgenden Methoden umgehen.

Sekundäre div

Fügen Sie dem Container ein weiteres div -Element hinzu, um den Hintergrund aufzunehmen. Dies ist die browserfreundlichste Methode und funktioniert sogar mit 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%;
}

Siehe Testfall auf jsFiddle

: vor und :: vor Pseudoelement

Ein weiterer Trick ist die Verwendung der CSS 2.1 :before Oder CSS 3 ::before Pseudoelemente. :before - Pseudoelement wird in IE ab Version 8 unterstützt, während das ::before - Pseudoelement überhaupt nicht unterstützt wird. Dies wird hoffentlich in der Version behoben 10.

[~ # ~] 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;
}

Zusätzliche Bemerkungen

Aufgrund des Verhaltens von z-index Müssen Sie einen Z-Index für den Container sowie einen negativen z-index Für das Hintergrundbild festlegen.

Testfälle

Siehe Testfall auf jsFiddle:

84
mekwall

Also hier ist ein anderer Weg:

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>

wenn man 4 Sätze von Zahlen einschließt, würde dies zu einem RGBA führen, nicht zu einem CMYK, aber es würde in beiden Fällen funktionieren (RGBA = 00000088, CMYK = 0%, 0%, 0%, 50%).

0
villager1

Ich implementierte Marcus Ekwalls Lösung , konnte aber einige Dinge entfernen, um es einfacher zu machen und es funktioniert immer noch. Vielleicht 2017 Version von 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

Keine der Lösungen hat für mich funktioniert. Wenn alles andere fehlschlägt, rufen Sie das Bild in Photoshop auf und wenden Sie einen Effekt an. 5 Minuten versus so viel Zeit dafür ...

0
user2060451

Dies kann durch Verwendung der verschiedenen div-Klasse für den Text Hi There ... erfolgen.

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

Jetzt können Sie die Stile auf die anwenden

etikett. ansonsten für bg klasse. Ich bin sicher, dass es gut funktioniert

0

Hallo an alle, ich habe das gemacht und es hat gut funktioniert

        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