CSS referanslar görebileceğiniz görüntü saydamlığını ayarlamak için nasıl ve ne kadar bir arka plan görüntüsü ayarlamak için . Ancak şeffaf bir arka plan görüntüsü ayarlamak için bu ikisini nasıl birleştirebilirim?
Arka plan olarak kullanmak istediğim bir görüntüm var, ama çok parlak - opaklığı yaklaşık 0.2'ye düşürmek istiyorum. Bunu nasıl yapabilirim?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}Yanıtlar:
İki yöntem:
<div>olduğunu position: absolute;daha önce #mainve aynı yükseklikte #mainsonra Arka plan resmi uygulamak ve, opacity: 0.2; filter: alpha(opacity=20);.#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;
}:beforeyerine kullanıyorum :afterve daha sonra kurcalamak zorunda değilim z-indexçünkü :beforeotomatik olarak ana içeriğin altında bitiyor. (Şu anda Chrome ve FF'de test edilmiştir.)
background-repeat: no-repeat; background-attachment: fixed; background-position: center;dahilinde #main: sonra {...} .
1 div ve NO şeffaf görüntü ile çözüm:
Çok arka planlı CSS3 özelliğini kullanabilir ve iki arka plan koyabilirsiniz: biri görüntü ile, diğeri üzerinde şeffaf bir panel ile (çünkü doğrudan arka plan görüntüsünün opaklığını ayarlamanın bir yolu olmadığını düşünüyorum):
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;Kullanamazsınız rgba(255,255,255,0.5)çünkü sadece arkada kabul edilir, bu nedenle bu örnek için her tarayıcı için oluşturulan degradeler kullandınız (bu yüzden çok uzun). Ancak konsept şu şekildedir:
background: tranparentColor, url("myImage"); degradeyi yalnızca arka plan resmine ayarlamanız gerekirse :
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);Bunu gördüm ve CSS3'e şimdi kodu böyle yerleştirebilirsiniz. Diyelim ki tüm arka planı kaplamasını istiyorum, böyle bir şey yaparım. Daha sonra hsla(0,0%,100%,0.70)veya rgba ile istediğiniz görünümü elde etmek için yüzde doygunluğu veya opaklığı olan beyaz bir arka plan kullanırsınız.
.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;
}Bunu başarmak için CSS psuedo selector :: after komutunu kullanabilirsiniz. İşte çalışan bir 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>Benzer bir sorunum vardı. Bir görüntüm vardı ve saydamlığı azaltmak ve görüntünün arkasında siyah bir arka plan olmasını istedim. Opaklığı azaltmak veya siyah bir arka plan veya herhangi bir ikincil div oluşturmak yerine, görüntüye bir satırda doğrusal bir degrade ayarladım:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");@Dan Eastwell'in cevabını kullandım ve çok iyi çalışıyor. Kod, koduna benzer, ancak bazı eklemelerle.
.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;
}Basit bir görüntü için bunu yapmanın harika bir yolu, HTML öğesinin arka planını böyle ayarlamak için yalnızca CSS kullanarak yapmaktır.
HTML {
background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
width: 100%;
height: 100%;
}Eğer almak istiyorsanız fantezi , ve opaklığını ayarlamak, o zaman, IE9 + *, sen vücudun şeffaf arka plan rengini ayarlayabilirsiniz. Bu, görüntüyü daha beyaz yapmak için yarı saydam beyazın üzerine bindirerek çalışır ve daha parlak görünür. Örneğin,% 75 opaklığa ( rgba(255,255,255,.75)) sahip beyaz , aşağıdaki etkiyi yaratır.
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>position: relativevücut iken, position: absolute. Bu, vücudun arka plan renginin vücuttaki metnin bir vurgulayıcı gibi davranmasını önlemek içindir.Bu , vücudun RGBA renk arka planını değiştirerek CSS filtreleriyle karşılaştırılabilir, ancak yine de çok farklı bir şeye genişletilebilir . Örneğin rgba(0,255,0,.75), kod snippet'inde gördüğünüz gibi çok yeşil bir renk tonu oluşturur.
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>rgba(0,255,0,.75)örnek olarak verilen bir şey olarak yorumlar {red:0, green:255, blue:0, alpha:'75%'}.* Tam uyumluluk tablosu Can I Use'da bulunabilir. Ancak, IE9'un desteklediğini görmek için "Tümünü Göster" i tıklamanız gerektiğini lütfen unutmayın.
Soruyu daha önce yanıtladığımdan ancak eklemek istediğim daha fazla şeyim olduğundan, bu bölüm eklentisini başlıklıyorum ve potansiyel olarak yararlı bilgiler eklemesini sağlıyorum. Bu nedenle, yukarıdaki içerikte daha da fazla tahmin yapmak için, bir SVG'yi kötü harika şeyler yapmak için arka plan görüntüsü olarak kullanabilirsiniz. Örneğin, aşağıdaki base64 kodlu SVG örneğinde gördüğünüz gibi havalı bir web sitesi simgesi içeren bir yükleme ekranı arka planı oluşturabilirsiniz.
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>background-size: cover CSS arka planda SVG logosu HTML öğesinin boyutuna getirilebilen neden olur.Sadece arka plan saydamlığını yapmanın tek CSS yolu RGBabitti, ancak bir görüntü kullanmak istediğiniz için, görüntüyü şeffaf hale getirmek için Photoshop veya Gimp kullanmanızı ve ardından arka plan olarak kullanmanızı öneririm.
opactiy: 1;sadece RGBa değil.
background-imagestili bir kap üzerine ayarlamak ve sonra opacityaynı öğeye bir stil ayarlamaktır . Bu, o öğenin metnini ve diğer içeriğini de şeffaf hale getirir. Bana inanmıyorsan bu out deneyin: w3schools.com/Css/tryit.asp?filename=trycss_transparency
#Main'de pozisyon = mutlak, üst = 0, genişlik =% 100 ekledim ve #background'a opaklık değerini ayarladım
#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}Arka planı ana bölümden önce bir div'e uyguladım.
Aynı konuya sahip olduğum için bu yazıya rastladım, sonra neden Photoshop'ta opaklığı ayarlayabildiğiniz zaman css, değerleri ayarlama ve yenilemeye vurma hakkında düşündüm? Görüntüyü kopyalayın, yeni bir katman olarak yapıştırın, sonra opaklık kaydırıcısını hareket ettirin.
opacity: ...tüm tarayıcılarda belirleyebileceğimize göre , çok daha iyi!