webentwicklung-frage-antwort-db.com.de

Wie kann eine Deckkraft angewendet werden, ohne dass ein untergeordnetes Element mit HTML/CSS betroffen ist

Ich möchte dies mit HTML und CSS erreichen:

schema

Ich habe versucht, die Deckkraft des Containers auf 0,3 und die Box auf 1 einzustellen, aber es funktioniert nicht: Beide Divs haben 0,3 Deckkraft.

jsFiddle mein Versuch hier

Der Effekt, den ich versuche zu erreichen, ist ein Popup-Feld, das oben auf der Seite angezeigt wird. Sie wird hervorgehoben, indem der folgende Inhalt ausgeblendet wird (indem die Deckkraft verringert wird).

34

Soweit ich weiß, können Sie es nicht auf einfache Weise tun. Hier gibt es einige Möglichkeiten: 1. Verwenden Sie die absolute Positionierung, um das Kästchen "im Behälter" zu positionieren.

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #container {
                opacity: 0.3;
                background-color: #777788;
                position: absolute;
                top: 100px;
                left: 100px;
                height: 150px;
                width: 300px;
            }
            #box {
                opacity: 1;
                background-color: #ffffff;
                position: absolute;
                top: 110px;
                left: 110px;
                height: 130px;
                width: 270px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="box">
            <p>Something in here</p>
        </div>
    </body>
</html>
  1. Verwenden Sie Javascript - fast genauso wie oben, Position und Größe müssen jedoch nicht fest codiert werden.
19
Ilia Frenkel

Hallo, du kannst Opicity mit Hintergrundfarbe so verwenden

css

#container {
  border: solid gold 1px;   
  width: 400px;
  height: 200px;
   background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
      background:rgba(205,206,255,0.1);
}

HTML

<div id="container">
containter text
<div id="box">
    box text
</div>
</div>

Live-Demo http://jsfiddle.net/rohitazad/yT6nG/29/

69
Rohit Azad

Versuchen Sie, rgba als eine Überlagerung für "Vor-Inhalt" für Ihr Bild zu verwenden. Dies ist eine gute Möglichkeit, die Dinge ansprechbar zu halten und keines der anderen Elemente zu beeinflussen. 

header #inner_header_post_thumb {
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;
}

header #inner_header_post_thumb .dark_overlay {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

header #inner_header_post_thumb .dark_overlay .container .header-txt {
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
  font-size: 40px;
  color: #ffffff;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p {
  font-size: 18px;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
  font-weight: 700;
}
<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Sehen Sie hier einen funktionierenden Code

4
Jon Bennett

Wenden Sie diese CSS-Regel an 

.alpha60 { 

/* Fallback for web browsers that doesn't support RGBa */ 

background: rgb(0, 0, 0); 

/* RGBa with 0.6 opacity */ 

background: rgba(0, 0, 0, 0.6); 

/* For IE 5.5 - 7*/ 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,      endColorstr=#99000000); 

/* For IE 8*/ 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,     endColorstr=#99000000)"; 
}

Außerdem müssen Sie den Hintergrund: transparent für IE - Webbrowser angeben.

Für weitere Informationen besuchen Sie den folgenden Link:

http://robertnyman.com/2010/01/11/css-background-Transparenz-ohne- beeinflussende-Kinderelemente-durch-rgba-und-filter/

2
vinitha

Eine andere Problemumgehung besteht darin, einfach einen Überlagerungshintergrund zu verwenden, um einen ähnlichen Effekt zu erzeugen.

Ich persönlich mag ein schwarzes Overlay mit einer Deckkraft von etwa 65%, aber für das, was Sie zu tun versuchen, möchten Sie vielleicht ein weißes Overlay bei rund 70% verwenden.

Erstellen Sie in Photoshop oder GIMP ein kleines (100 x 100 oder weniger) PNG mit der gewünschten Farbe und Deckkraft. Stellen Sie dann einfach den Hintergrund Ihrer Lichtbox ein.

Wenn Sie mehrere PNGs mit unterschiedlichen Opazitäten erstellen, können Sie problemlos mit JS oder dynamisch über das Backend-Scripting zwischen diesen wechseln.

Es ist technisch nicht das, was Sie zu tun versuchen, aber ästhetisch kann es einen sehr ähnlichen Effekt geben, und UX erreicht weise dasselbe. Es ist auch sehr einfach zu tun und wird von so ziemlich allem unterstützt.

1
Brian D.

Dies ist möglicherweise keine orthodoxe Methode, Sie können jedoch für jeden sich wiederholenden div/container ein kleines halbtransparentes Hintergrundbild verwenden. Es scheint, dass Sie in der heutigen Zeit dazu in der Lage sein sollten, dies in reinen (einfachen, nicht hackenden) CSS ohne Js zu erreichen.

Die Verwendung eines gekachelten Bildes erscheint möglicherweise veraltet, funktioniert jedoch bei allen Browsern problemlos.

0
megaSteve4

Sie können die Geschwister eines Containers, die absolut hinter dem Container positioniert sind, mit derselben Größe hinzufügen und ihm die Deckkraft zuweisen.

Und verwenden Sie keinen Hintergrund für Ihren Container.

Jetzt haben die Kinder des Containers keine undurchsichtigen Eltern und das Problem verschwindet.

0
Mikhail Batcer

Die Verwendung von background-color: rgba(#777788, 0.3); anstelle von Deckkraft könnte das Problem möglicherweise beheben.

0
Claudio

Jedes untergeordnete Element eines Elements mit einer festgelegten Deckkraft nimmt diese Deckkraft an.

Um diesen Stil zu erreichen, können Sie rgba-Farben und Filter für IE für den Hintergrund und Deckkraft für die Textelemente verwenden. Solange das zweite Feld kein untergeordnetes Element eines der Textelemente ist, erbt es die Deckkraft nicht.

0
michaelward82