264

Widzę w odnośnikach CSS, jak ustawić przezroczystość obrazu i jak ustawić obraz tła . Ale jak połączyć te dwa elementy, aby ustawić przezroczysty obraz tła?

Mam obraz, który chciałbym wykorzystać jako tło, ale jest on zbyt jasny - chciałbym zmniejszyć krycie do około 0,2. W jaki sposób mogę to zrobić?

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

css AP257
źródło

133

Dwie metody:

Konwertuj na PNG i ustaw oryginalny obraz na 0,2 krycia
(Metoda Better) mają <div>to position: absolute;przed #maini taką samą wysokość jak #main, a następnie zastosować obraz tła i opacity: 0.2; filter: alpha(opacity=20);.

Niet the Dark Absol
źródło

Tak, dużym problemem z PNG jest rozmiar. Prawdopodobnie będzie naprawdę duży. Teraz, gdy możemy określić opacity: ...we wszystkich przeglądarkach, jest o wiele lepiej!

Alexis Wilke

1

Byłbyś zaskoczony tym, co możesz wycisnąć z PNG. Na przykład przy 0.2 krycia prawdopodobnie nie wybierzesz wielu szczegółów, więc możesz przekonwertować na Indexed-PNG. Właściwie używam tego na własnej stronie internetowej, co powoduje zmiażdżenie obrazu tła 1920x1080 do rozmiaru prawie 250 KB.

Niet the Dark Absol

Lepiej dodaj indeks Z: -1 do tej pozycji: bezwzględny, aby umożliwić użycie dna nad nakładką. Dobra odpowiedź.

Raz

1

Możesz także użyć WebP - obsługuje przezroczystość, a rozmiar pliku jest znacznie mniejszy niż PNG. Wszystkie główne przeglądarki oprócz Safari obsługują teraz WebP. Możesz obsługiwać WebP do obsługi przeglądarek, a PNG do Safari.

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
źródło

4

Wygenerowana treść od IE8 w górę. caniuse.com/#feat=css-gencontent , użyj właściwości filtru dla IE8. caniuse.com/#search=opacity

Dan Eastwell

3

Dodałem „Z-index: -1” do CSS. W ten sposób na obraz tła wpływa nieprzezroczystość, a nie reszta zawartości #main

Patrick

17

Używam :beforezamiast, :aftera potem nie muszę manipulować, z-indexponieważ automatycznie :beforekończy się poniżej głównej zawartości. (Obecnie testowane w Chrome i FF.)

KajMagnus

1

@KajMagnus Jeśli to zrobisz, wszystko po tym nie zostanie wyświetlone. Spróbuj mieć krycie 1,0, a zobaczysz, co mam na myśli.

Jessica,

1

Jeśli otrzymujesz powtarzający się obraz tła, możesz chcieć / trzeba dodać background-repeat: no-repeat; background-attachment: fixed; background-position: center;w ciągu #main: after {...} .

zakaz geoinżynierii

106

Rozwiązanie z 1 dywizją i BEZ przezroczystego obrazu:

Możesz użyć funkcji CSS3 multibackground i umieścić dwa tła: jedno z obrazem, drugie z przezroczystym panelem nad nim (bo myślę, że nie ma sposobu, aby ustawić bezpośrednio krycie obrazu tła):

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;

Nie możesz użyć, rgba(255,255,255,0.5)ponieważ sam jest akceptowany tylko z tyłu, więc użyłem wygenerowanych gradientów dla każdej przeglądarki w tym przykładzie (dlatego jest tak długi). Ale koncepcja jest następująca:

background: tranparentColor, url("myImage");

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

Drewno
źródło

Działa to tylko wtedy, gdy tło ma jednolity kolor, jeśli masz PNG24, który jest tłem i chcesz, aby miał krycie (na przykład po najechaniu myszą), to nie zadziała i będziesz musiał użyć metody pseudoelementu , co jest w rzeczywistości lepsze, ponieważ można go używać w IE 8 i nowszych wersjach.

vsync,

66

Proste rozwiązanie

jeśli chcesz ustawić gradient tylko na obraz w tle :

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
źródło

Obraz przesuwa się nieznacznie na górę. Czy to naprawia?

HFR1994

6

Możesz także użyć obrazu tła RGBA 255,255,255: gradient liniowy (do dołu, rgba (255,255,255,0,6) 0%, rgba (255,255,255,0,6) 100%), adres URL (IMAGE_URL);

Rzym.

@Roman Możesz ustawić komponent koloru rgba na wartość używaną jako kolor tła w elemencie lub jego macierzystym obiekcie do osadzania (testowane na Chrome 58.0.3029.81, Edge 38.14393.0.0).

Collapsar

46

Widziałem to, aw CSS3 możesz teraz umieścić kod w ten sposób. Powiedzmy, że chcę, aby obejmował całe tło, zrobiłbym coś takiego. Następnie z hsla(0,0%,100%,0.70)lub rgba używasz białego tła z dowolnym procentowym nasyceniem lub kryciem, aby uzyskać pożądany wygląd.

.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;
}

Nataniel steruje
źródło

2

Dodanie koloru tła i trybu mieszania tła pomogło mi. Teraz mam divę z nieprzezroczystością, która nie wpływa na jej dzieci!

Diego Victor de Jesus,

1

to jest świetne! Stworzyłem funkcję jquery, aby zmienić krycie przy przewijaniu, tworząc kolor nad obrazem tła podczas przewijania w dół. $ (funkcja () {$ (okno) .scroll (funkcja () {var scroll = $ (okno) .scrollTop (); var current = 0; var now = (current-scroll) / 7; $ ('. slide ') .css („tło-pozycja”, „50%” + teraz + „px”); var color = Math.round (scroll / 7) / 100; $ („. slide”). css („background- color ',' rgba (128, 45, 87, '+ color +') ');});});

drooh

10

Aby to zrobić, możesz użyć selektora psuedo CSS :: po. Oto działające demo.

.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>

Rozwiń fragment kodu

Hari Das
źródło

4

Miałem podobny problem. Miałem obraz i chciałem zmniejszyć przezroczystość i mieć czarne tło za obrazem. Zamiast zmniejszania krycia lub tworzenia czarnego tła lub jakiegokolwiek dodatkowego elementu div ustawiam gradient liniowy na obrazie w jednym wierszu:

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

Rozwiń fragment kodu

matteo_dm
źródło

3

Użyłem odpowiedzi @Dan Eastwell i działa bardzo dobrze. Kod jest podobny do jego kodu, ale z pewnymi dodatkami.

.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 Kamerun
źródło

2

Świetnym sposobem na zrobienie tego dla prostego obrazu jest zrobienie tego za pomocą CSS, aby ustawić tło elementu HTML w ten sposób.

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

Rozwiń fragment kodu

Jeśli chcesz się spodobać i ustawić jego krycie, to w IE9 + * możesz ustawić przezroczysty kolor tła ciała. Działa to poprzez nałożenie półprzezroczystej bieli, aby obraz był bielszy i wydawał się jaśniejszy. Na przykład biel z 75% kryciem ( rgba(255,255,255,.75)) dałaby następujący efekt.

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>

Rozwiń fragment kodu

Wskazówka: zauważ, jaki jest kod HTML position: relative, podczas gdy treść jest position: absolute. Zapobiega to zachowaniu się koloru tła ciała bardziej jak rozświetlacza tekstu w ciele.

Można to nawet rozszerzyć na coś porównywalnego, ale wciąż bardzo różniącego się od filtrów CSS, zmieniając wokół koloru tła RGBA. Na przykład rgba(0,255,0,.75)utworzyłby bardzo zielony odcień, co widać we fragmencie kodu.

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>

Rozwiń fragment kodu

Wskazówka: RGBA odpowiada R ed G reen B lue A lpha. Tak więc przeglądarka interpretuje to rgba(0,255,0,.75)jako przykład {red:0, green:255, blue:0, alpha:'75%'}.

* Pełną tabelę zgodności można znaleźć na stronie Can I Use. Pamiętaj jednak, że musisz kliknąć „Pokaż wszystko”, aby zobaczyć, że IE9 obsługuje to.

Uzupełnienie

Ponieważ już odpowiedziałem na pytanie, ale mam więcej, które chcę dodać, zatytułuję ten dodatek do sekcji i dodam kilka potencjalnie pomocnych informacji. Tak więc, aby ekstrapolować jeszcze bardziej na powyższej treści, możesz użyć SVG jako obrazu tła, aby robić niegodziwe niesamowite rzeczy. Na przykład możesz utworzyć tło ekranu ładowania z fajną ikoną witryny, jak widać na przykładzie SVG zakodowanego w standardzie base64 poniżej.

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>

Rozwiń fragment kodu

Wskazówka:background-size: cover CSS powoduje logo SVG w tle, aby być zmniejszane do rozmiaru elementu HTML.

3,1415926535897932384626433833
źródło

1

W swoim CSS dodaj ...

 filter: opacity(50%);

W JavaScript użyj ...

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

Uwaga: w razie potrzeby dodaj prefiksy dostawcy, ale bez Chromium.

Coder42
źródło

0

Cóż, jedynym sposobem CSS na zrobienie tylko przezroczystości tła jest RGBaprzejście, ale ponieważ chcesz użyć obrazu, sugeruję użycie Photoshopa lub Gimpa, aby uczynić obraz przezroczystym, a następnie użyć go jako tła.

źródło

To nie jest poprawne, istnieje deklaracja CSS3: opactiy: 1;nie tylko RGBa.

Kyle,

4

To, co mówi, to ustawienie background-imagestylu na kontenerze, a następnie ustawienie opacitystylu na tym samym elemencie. Dzięki temu tekst i inne treści tego elementu będą przejrzyste. Wypróbuj to, jeśli mi nie wierzysz: w3schools.com/Css/tryit.asp?filename=trycss_transparency

0

Właśnie dodałem pozycję = wartość absolutna, góra = 0, szerokość = 100% w #main i ustawiłem wartość krycia na #background

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

Zastosowałem tło do div przed main.

leniwy
źródło

-1

Natknąłem się na ten post, ponieważ miałem ten sam problem, a potem pomyślałem, po co mieszać się z css, dostosowywać wartości i odświeżać, skoro możesz łatwo dostosować krycie w Photoshopie? Skopiuj obraz, wklej go jako nową warstwę, a następnie przesuń suwak krycia.

MBM
źródło

2

ArtB ma rację z ostatnią nutą. Jest to doskonałe rozwiązanie dla innego problemu. Są chwile, kiedy nie jest to właściwe rozwiązanie i jest to jedno z nich.

jon

-1

Miałem podobny problem i właśnie zrobiłem obraz tła w Photoshopie i utworzyłem nowy plik .png z nieprzezroczystością, której potrzebowałem. Problem rozwiązany bez obawy, że mój CSS działał na wszystkich urządzeniach i przeglądarkach

Aebares
źródło

Czy mogę ustawić obraz tła i krycie w tej samej właściwości?

Odpowiedzi:

Proste rozwiązanie

Uzupełnienie