web-tikis responsive quadratische Raster-Layouts habe ich einige ansprechende gemacht Quadrate mit Hintergrundbildern und Text darauf wie folgt:
HTML:
%Vor%CSS:
%Vor%Jetzt versuche ich, nur den Hintergrund transparent zu machen, nicht den Text.
Bei Verwendung der Eigenschaft opacity: 0.3 in der CSS-Klasse imgautumn1 wird das Bild transparent, aber auch der darin enthaltene Text. Andere Techniken wie die von diese SO-Antwort mit einem separaten div für den Hintergrund oder einer Technik mit dem :after Element von here für den Hintergrund und die Opazität machen die Positionierung des Hintergrunds falsch (dh das Bild ist nicht zentriert) und ich finde es schwierig es zu implementieren. Eine andere Möglichkeit wäre, ein transparentes Div-Quadrat über dem Bild zu platzieren, aber ich denke nicht, dass dies mit der Eigenschaft background-image möglich ist.
Ich hoffe, dass jemand hier mir helfen kann, nur den Hintergrund transparent zu machen und nicht den Text.
JSFiddle: Ссылка
Scheint gut zu funktionieren, wenn Sie die :after / :before Lösung verwenden ( das Bild als Hintergrund festlegen )
Sie müssen nur sicherstellen, dass Sie die gleichen background Eigenschaften anwenden.
Demo bei Ссылка
Tags und Links html css image background opacity