Dasow
  1. Dasow
  3. CSS-Deckkraft nur zur Hintergrundfarbe nicht der Text darauf?
Intereting Posts
Wo ist die Eingabeaufforderung des Entwicklers für VS2013? Verwenden von Pipes innerhalb von ngModel auf INPUT-Elementen in Angular Wie funktioniert das? #Iefix triggers das Laden von Webschriftarten in IE6-IE8? Permutationen träge erzeugen Größe des Ordners oder der Datei ermitteln Ist der Microsoft.VisualBasic-Namespace “echter .NET” -Code? Side-by-Side-Diagramme mit ggplot2 Gibt es eine Möglichkeit, das C ++ – Freund-Konzept in Java zu simulieren? Schneiden Sie Ecken mit CSS Nullzeiger Ausnahme – findViewById () Sind verschachtelte Transaktionen in MySQL erlaubt? Warum bekomme ich die gleiche Sequenz für jeden Lauf mit std :: random_device mit mingw gcc4.8.1? Was ist der einfachste Weg, um eine INI-Datei in C ++ zu analysieren? Suche Textzeichenfolge mit jQuery? Angular – Setze Header für jede Anfrage

CSS-Deckkraft nur zur Hintergrundfarbe nicht der Text darauf?

Kann ich die Eigenschaft ” div nur der background eines div und nicht dem Text zuweisen?

Ich habe es versucht: 

 background: #CCC; opacity: 0.6;

aber das ändert die Deckkraft nicht.

   

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.