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:
text
div eine durchgehende Hintergrundfarbe, da dies der JS-less-Standardwert ist. 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.