CSS-Deckkraft nur zur Hintergrundfarbe nicht der Text darauf?

Es klingt so, als ob Sie einen transparenten Hintergrund verwenden möchten. In diesem Fall könnten Sie versuchen, die function rgba() verwenden:

rgba(R, G, B, A)

R (rot), G (grün) und B (blau) können entweder s oder s sein, wobei die Zahl 255 100% entspricht. A (Alpha) kann eine zwischen 0 und 1 oder ein , wobei die Zahl 1 100% entspricht (volle Opazität).

RGBa Beispiel

 rgba(51, 170, 51, .1) /* 10% opaque green */ rgba(51, 170, 51, .4) /* 40% opaque green */ rgba(51, 170, 51, .7) /* 70% opaque green */ rgba(51, 170, 51, 1) /* full opaque green */ 

Ein kleines Beispiel, das zeigt, wie rgba verwendet werden kann.

Ab 2018 unterstützt praktisch jeder Browser die rgba Syntax .

Der einfachste Weg, dies zu tun, ist mit 2 Divs, 1 mit dem Hintergrund und 1 mit dem Text:

 #container { position: relative; width: 300px; height: 200px; } #block { background: #CCC; filter: alpha(opacity=60); /* IE */ -moz-opacity: 0.6; /* Mozilla */ opacity: 0.6; /* CSS3 */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; } #text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

 
 
 
Test
  

Dies funktioniert mit jedem Browser

 div { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; } 

Wenn Sie nicht möchten, dass Transparenz den gesamten Container und seine untergeordneten Elemente beeinflusst, überprüfen Sie diese Problemumgehung. Sie müssen ein absolut positioniertes Kind mit einem relativ positionierten Elternteil haben, um dies zu erreichen. http://www.impressivewebs.com/css-opacity-that-doesnt-affe-child-elements/

Überprüfen Sie die funktionierende Demo unter http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Nur für LESS- Benutzer:

Wenn Sie Ihre colors nicht mit RGBA, sondern mit HEX einstellen möchten, gibt es Lösungen.

Du könntest ein Mixin verwenden wie:

 .transparentBackgroundColorMixin(@alpha,@color) { background-color: rgba(red(@color), green(@color), blue(@color), @alpha); } 

Und benutze es gerne

 .myClass { .transparentBackgroundColorMixin(0.6,#FFFFFF); } 

Genau das bietet eine integrierte LESS-function auch:

 .myClass { background-color: fade(#FFFFFF, 50%); } 

Siehe Wie konvertiert man HEX-Farbe in rgba mit weniger Compiler?

Mein Trick ist, eine transparente .png mit der Farbe zu erstellen und background:url() .

Ich hatte das gleiche Problem. Ich möchte 100% transparente Hintergrundfarbe, benutze einfach diesen Code, es hat gut funktioniert für mich:

 rgba(54, 25, 25, .00004); 

Sie können Beispiele auf der linken Seite auf dieser Webseite sehen (der Kontaktformularbereich)

Eine gute Möglichkeit, dies zu tun, wäre in der Tat css3 zu verwenden.

Erstellen Sie eine Div-Breite eine class – zB Supersizer oben auf Ihrer Seite:

dann setze folgende css-Eigenschaften:

  .supersizer { background: url("http://sofde.miximages.com/css/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed; width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0.5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; } 

Für jeden, der auf diesen Thread stößt, hier ist ein Skript namens thatsNotYoChild.js, das ich gerade geschrieben habe und das dieses Problem automatisch triggers:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Im Grunde trennt es Kinder vom übergeordneten Element, behält das Element jedoch am selben physischen Ort auf der Seite.

Die einfachste Lösung besteht darin, 3 divs zu erstellen. Eine, die die anderen 2 enthält, die mit transparentem Hintergrund und die mit Inhalt. Setzen Sie die relative Position des ersten Teilbereichs und legen Sie den Teil mit dem transparenten Hintergrund auf den negativen z-index , und passen Sie die Position des Inhalts so an, dass sie über den transparenten Hintergrund passt. Auf diese Weise haben Sie keine Probleme mit der absoluten Positionierung.

benutzen

 background:url("location of image");//use an image with opacity 

Diese Methode funktioniert in allen Browsern

Du kannst nicht. Sie müssen ein separates div haben, das nur diesen Hintergrund darstellt, so dass Sie nur die Deckkraft darauf anwenden können.

Ich habe das kürzlich versucht, und da ich bereits jQuery verwendet habe, fand ich Folgendes am wenigsten mühsam:

1. Erstellen Sie die zwei verschiedenen Divs. Sie werden Geschwister sein, nicht in einander oder irgendetwas enthalten.
2. Geben Sie dem text div eine durchgehende Hintergrundfarbe, da dies der JS-less-Standardwert ist.
3. Verwenden Sie jQuery, um die Höhe des text Div zu ermitteln, und wenden Sie sie auf das background Div an.

Ich bin mir sicher, dass es eine Art CSS-Ninja-Möglichkeit gibt, all dies nur mit Floats oder etwas zu tun, aber ich hatte nicht die Geduld, es herauszufinden.