Kann ich Hintergrundbild und Deckkraft in derselben Eigenschaft festlegen?

264

In CSS-Referenzen kann ich sehen, wie die Bildtransparenz und das Hintergrundbild festgelegt werden . Aber wie kann ich diese beiden kombinieren, um ein transparentes Hintergrundbild zu erstellen?

Ich habe ein Bild, das ich als Hintergrund verwenden möchte, aber es ist zu hell - ich möchte die Deckkraft auf etwa 0,2 verringern. Wie kann ich das machen?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
css AP257
quelle

Antworten:

133

Zwei Methoden:

  1. In PNG konvertieren und die Deckkraft des Originalbilds auf 0,2 einstellen
  2. (Bessere Methode) ein <div>das heißt position: absolute;vor #mainund die gleiche Höhe wie #main, gilt dann die Hintergrundbild und opacity: 0.2; filter: alpha(opacity=20);.
Niet the Dark Absol
quelle
Ja, das große Problem mit einem PNG ist die Größe. Es wird wahrscheinlich sehr groß sein. Jetzt, da wir opacity: ...in allen Browsern angeben können , ist es viel besser!
Alexis Wilke
1
Sie wären überrascht, was Sie aus PNG herausholen können. Bei einer Deckkraft von 0,2 werden Sie wahrscheinlich nicht viele Details auswählen, sodass Sie in Indexed-PNG konvertieren können. Ich verwende dies tatsächlich auf meiner eigenen Website und es drückt ein Hintergrundbild von 1920 x 1080 auf eine Größe von knapp 250 KB.
Niet the Dark Absol
Fügen Sie dieser Position: absolut besser den Z-Index: -1 hinzu, um die Verwendung von Bottoms über der Überlagerung zu ermöglichen. Gute Antwort.
Raz
1
Sie können auch WebP verwenden - es unterstützt Transparenz und die Dateigröße ist viel kleiner als bei PNG. Alle gängigen Browser außer Safari unterstützen jetzt WebP. Sie können WebP zur Unterstützung von Browsern und PNG für Safari bereitstellen.
Dan Roberts
364 
#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}
Dan Eastwell
quelle
4
Generierter Inhalt ab IE8. caniuse.com/#feat=css-gencontent , verwenden Sie die Filtereigenschaft für IE8. caniuse.com/#search=opacity
Dan Eastwell
3
Ich habe dem CSS einen "Z-Index: -1" hinzugefügt. Auf diese Weise wird das Hintergrundbild von der Deckkraft beeinflusst, nicht vom Rest des Inhalts von #main
patrick
17
Ich benutze :beforeanstelle von :afterund dann muss ich das nicht manipulieren, z-indexweil es :beforeautomatisch unter dem Hauptinhalt landet. (Derzeit in Chrome und FF getestet.)
KajMagnus
1
@KajMagnus Wenn du das machst, wird nicht alles danach angezeigt. Wenn Sie eine Deckkraft von 1,0 haben, werden Sie sehen, was ich meine.
Jessica
1
Wenn Sie ein wiederholtes Hintergrundbild erhalten, möchten / müssen Sie möglicherweise background-repeat: no-repeat; background-attachment: fixed; background-position: center;innerhalb von #main: after {...} hinzufügen .
Ban-Geoengineering
106

Lösung mit 1 div und KEIN transparentem Bild:

Sie können die Multibackground-CSS3-Funktion verwenden und zwei Hintergründe einfügen: einen mit dem Bild und einen mit einem transparenten Bedienfeld (da es meiner Meinung nach keine Möglichkeit gibt, die Deckkraft des Hintergrundbilds direkt festzulegen):

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

Sie können es nicht verwenden, rgba(255,255,255,0.5)da es allein nur auf der Rückseite akzeptiert wird. Deshalb habe ich für dieses Beispiel für jeden Browser generierte Verläufe verwendet (deshalb ist es so lang). Das Konzept lautet jedoch wie folgt:

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

Holz
quelle
Dies funktioniert nur, wenn der Hintergrund einfarbig ist. Wenn Sie PNG24 als Hintergrund haben und eine Deckkraft haben möchten (z. B. beim Hover), funktioniert dies nicht und Sie müssen die Pseudoelementmethode verwenden , was eigentlich besser ist, da es in IE 8 und höher verwendet werden könnte.
vsync
66

Einfache Lösung

Wenn Sie den Verlauf nur auf Hintergrundbild einstellen müssen :

background-image: url(IMAGE_URL); /* fallback for older browsers */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
Francesco Borzi
quelle
Das Bild bewegt sich leicht nach oben. Hat es eine Lösung?
HFR1994
6
Sie können auch das Hintergrundbild RGBA 255,255,255 verwenden: linearer Farbverlauf (nach unten, rgba (255,255,255,0,6) 0%, rgba (255,255,255,0,6) 100%), url (IMAGE_URL);
Roman
@Roman Sie können die rgba-Farbkomponente auf den Wert setzen, der als Hintergrundfarbe im Element oder dessen Einbettungselement verwendet wird (getestet in Chrome 58.0.3029.81, Edge 38.14393.0.0).
Kollapsar
46

Ich habe das gesehen und in CSS3 können Sie jetzt Code wie folgt einfügen. Nehmen wir an, ich möchte, dass es den gesamten Hintergrund abdeckt. Ich würde so etwas tun. Dann verwenden Sie mit hsla(0,0%,100%,0.70)oder rgba einen weißen Hintergrund mit einem beliebigen Prozentsatz an Sättigung oder Deckkraft, um das gewünschte Aussehen zu erzielen. 

.body{
    background-attachment: fixed;
    background-image: url(../images/Store1.jpeg);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: hsla(0,0%,100%,0.70);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}
Nathaniel Helme
quelle
2
Das Hinzufügen von Hintergrundfarbe und Hintergrundmischmodus hat den Trick für mich getan. Jetzt habe ich ein Div mit einer Deckkraft, die seine Kinder nicht betrifft!
Diego Victor de Jesus
1
das ist toll! Ich habe eine Abfragefunktion erstellt, um die Deckkraft beim Scrollen zu ändern und beim Scrollen nach unten eine Farbe über einem Hintergrundbild zu erstellen. $ (function () {$ (window) .scroll (function () {var scroll = $ (window) .scrollTop (); var current = 0; var now = (current-scroll) / 7; $ ('. slide ') .css (' Hintergrundposition ', '50%' + jetzt + 'px'); var color = Math.round (scroll / 7) / 100; $ ('. slide'). css ('background- color ',' rgba (128, 45, 87, '+ color +') ');});});
Drooh
10

Sie können CSS psuedo selector :: after verwenden, um dies zu erreichen. Hier ist eine funktionierende Demo.

Geben Sie hier die Bildbeschreibung ein

.bg-container{
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.bg-container .content{
  position: absolute;
  z-index:999;
  text-align: center;
  width: 100%;
}
.bg-container::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index:-99;
  background-image: url(https://i.stack.imgur.com/Hp53k.jpg);
  background-size: cover;
  opacity: 0.4;
}
<div class="bg-container">
   <div class="content">
     <h1>Background Opacity 0.4</h1>
   </div>
</div>
Erweitern Sie das Snippet

Hari Das
quelle
4

Ich hatte ein ähnliches Problem. Ich hatte ein Bild und wollte die Transparenz reduzieren und einen schwarzen Hintergrund hinter dem Bild haben. Anstatt die Deckkraft zu verringern oder einen schwarzen Hintergrund oder ein sekundäres Div zu erzeugen, setze ich einen linearen Farbverlauf für das Bild in einer Zeile:

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");
Erweitern Sie das Snippet

matteo_dm
quelle
3

Ich habe die Antwort von @Dan Eastwell verwendet und es funktioniert sehr gut. Der Code ähnelt seinem Code, enthält jedoch einige Ergänzungen.

.granddata {
    position: relative;
    margin-left :0.5%;
    margin-right :0.5%;
}
.granddata:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("/Images/blabla.jpg");
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}
El camerounian
quelle
2

Eine gute Möglichkeit, dies für ein einfaches Bild zu tun, besteht darin, nur CSS zu verwenden, um den Hintergrund des HTML-Elements so festzulegen.

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
}
Erweitern Sie das Snippet

Wenn Sie Lust haben und die Deckkraft einstellen möchten , können Sie in IE9 + * eine transparente Hintergrundfarbe des Körpers festlegen. Dies funktioniert, indem halbtransparentes Weiß überlagert wird, um das Bild weißer zu machen und heller zu wirken. Zum Beispiel würde Weiß mit 75% Deckkraft ( rgba(255,255,255,.75)) den folgenden Effekt erzeugen.

HTML {
  background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  background: rgba(255, 255, 255, .75);
}
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing.
  Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus.
  Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla
  et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos,
  massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl
  nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet
  porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris
  purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum
  lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient,
  imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
Erweitern Sie das Snippet

  • Tipp: Beachten Sie, wie der HTML-Code ist position: relative, während sich der Textkörper befindet position: absolute. Dies soll verhindern, dass sich die Hintergrundfarbe des Körpers eher wie ein Textmarker im Körper verhält.

Dies könnte sogar auf etwas erweitert werden, das mit CSS-Filtern vergleichbar, aber immer noch sehr verschieden ist, indem der RGBA-Farbhintergrund des Körpers geändert wird. rgba(0,255,0,.75)Würde beispielsweise einen sehr grünen Farbton erzeugen, wie Sie im Code-Snippet sehen können.

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
    position: relative;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(0,255,0,.75);
}
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
Erweitern Sie das Snippet

  • Tipp: RGBA entspricht R ed G reen B lue A lpha. Der Browser interpretiert dies also rgba(0,255,0,.75)als Beispiel {red:0, green:255, blue:0, alpha:'75%'}.


* Eine vollständige Kompatibilitätstabelle finden Sie unter Kann ich verwenden. Beachten Sie jedoch auch, dass Sie auf "Alle anzeigen" klicken müssen, um zu sehen, dass IE9 dies unterstützt.


Nachtrag

Da ich die Frage bereits beantwortet habe, aber noch mehr hinzufügen möchte, betitele ich diesen Abschnitt Nachtrag und lasse ihn einige potenziell hilfreiche Informationen hinzufügen. Um den obigen Inhalt noch weiter zu extrapolieren, könnten Sie eine SVG als Hintergrundbild verwenden, um böse, großartige Dinge zu tun. Sie können beispielsweise einen Ladebildschirmhintergrund mit einem coolen Website-Symbol erstellen, wie Sie im folgenden Beispiel eines Base64-codierten SVG sehen können.

HTML {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgYXJpYS1oaWRkZW49InRydWUiPjxnIGlkPSJrIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoLTEyMCkiIHRyYW5zZm9ybS1vcmlnaW49Ii41LjUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjMpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDAsMCwwLC45KSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9ImdyYWRpZW50VHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIgZHVyPSI3MDAwbXMiIGZyb209IjAiIHRvPSIzNjAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImQiIHI9Ii41IiBjeT0iLjUiIGN4PSIuNSI+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9ImdyZXkiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iYmxhY2siLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZSIgcj0iLjUiIGN5PSIuNSIgY3g9Ii41Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSJ5ZWxsb3ciLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0ieWVsbG93Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBzdHJva2U9ImdyZXkiIHN0cm9rZS13aWR0aD0iLjAxIiBpZD0iYiIgZD0iTS43NS43MUEuMzEuMzEgMCAxIDEgLjc1LjMxTC42OS4zOEEuMjIuMjIgMCAxIDAgLjY4LjY2TC41Ni41N0wuNi41MUwuODIuNjh6TS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6TS41NS41OEEuMDcuMDcgMCAxIDEgLjU2LjQ2TC42LjQzQS4xMi4xMiAwIDEgMCAuNTkuNjF6Ii8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImciPjxwYXRoIHN0cm9rZT0iZ3JleSIgZmlsbD0icmVkIiBzdHJva2Utd2lkdGg9Ii4wMSIgZD0iTS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2YpIiBmaWxsPSJ1cmwoI2MpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmVkIiBjbGlwLXBhdGg9InVybCgjZykiLz48L2c+PGcgdHJhbnNmb3JtPSJzY2FsZSgxLjEpIiB0cmFuc2Zvcm0tb3JpZ2luPSIuNS41Ij48dGV4dD48dGV4dFBhdGggaHJlZj0iI2IiIGZvbnQtc2l6ZT0iLjY1JSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgbGV0dGVyLXNwYWNpbmc9Ii0uNSUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUiPiBZT1VSIDx0c3BhbiBmaWxsPSJyZWQiPkVYQU1QTEUgV0VCU0lURTwvdHNwYW4+IExPR088L3RleHRQYXRoPjwvdGV4dD48L2c+PC9nPjwvc3ZnPg==');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(255,255,255,.5);
}
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
Erweitern Sie das Snippet

  • Tipp: Durch das background-size: coverCSS wird die Größe des SVG-Logos im Hintergrund auf die Größe des HTML-Elements angepasst.
3.1415926535897932384626433833
quelle
1

Fügen Sie in Ihrem CSS ...

 filter: opacity(50%);

In JavaScript verwenden ...

 element.style.filter='opacity(50%)';

NB: Fügen Sie nach Bedarf Herstellerpräfixe hinzu, aber Chromium sollte ohne in Ordnung sein.

Coder42
quelle
0

Nun, die einzige CSS-Methode, um nur Hintergrundtransparenz zu erzeugen, ist via, RGBaaber da Sie ein Bild verwenden möchten, würde ich empfehlen, Photoshop oder Gimp zu verwenden, um das Bild transparent zu machen und es dann als Hintergrund zu verwenden.


quelle
Dies ist nicht korrekt, es gibt eine CSS3-Deklaration: opactiy: 1;nicht nur RGBa.
Kyle
4
Was er sagt, ist das Festlegen des background-imageStils für einen Container und das Festlegen eines opacityStils für dasselbe Element. Das würde auch den Text und andere Inhalte dieses Elements transparent machen. Probieren Sie dies aus, wenn Sie mir nicht glauben: w3schools.com/Css/tryit.asp?filename=trycss_transparency
0

Ich habe gerade position = absolute, top = 0, width = 100% im #main hinzugefügt und den Opazitätswert auf #background gesetzt

#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}

Ich habe den Hintergrund auf ein Div vor dem Main angewendet.

faul
quelle
-1

Ich bin auf diesen Beitrag gestoßen, da ich das gleiche Problem hatte. Dann dachte ich mir, warum ich mit CSS herumspielen, Werte anpassen und auf Aktualisieren klicken sollte, wenn Sie die Deckkraft in Photoshop einfach anpassen können. Kopieren Sie das Bild, fügen Sie es als neue Ebene ein und bewegen Sie den Deckkraftregler.

MBM
quelle
2
ArtB hat es mit der letzten Note richtig gemacht. Dies ist eine perfekte Lösung für ein anderes Problem. Es gibt Zeiten, in denen dies nicht die richtige Lösung ist und dies eine davon ist.
Jon
-1

Ich hatte ein ähnliches Problem und habe einfach das Hintergrundbild mit Photoshop aufgenommen und eine neue PNG-Datei mit der erforderlichen Deckkraft erstellt. Problem gelöst, ohne sich Gedanken darüber zu machen, ob mein CSS auf allen Geräten und Browsern funktioniert

Aebares
quelle