मैं सीएसएस संदर्भ में देख सकते हैं छवि पारदर्शिता सेट करने का तरीका और कैसे एक पृष्ठभूमि छवि स्थापित करने के लिए । लेकिन पारदर्शी पृष्ठभूमि छवि सेट करने के लिए मैं इन दोनों को कैसे जोड़ सकता हूं?
मेरे पास एक ऐसी छवि है जिसे मैं एक पृष्ठभूमि के रूप में उपयोग करना चाहता हूं, लेकिन यह बहुत उज्ज्वल है - मैं अपारदर्शिता को लगभग 0.2 करना चाहता हूं। मैं यह कैसे कर सकता हूँ?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}जवाबों:
दो तरीके:
<div>कि position: absolute;पहले #mainऔर के रूप में एक ही ऊंचाई है #main, तो पृष्ठभूमि छवि लागू करें और 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;
}:beforeइसके बजाय का उपयोग करता हूं :afterऔर फिर मुझे इसमें छेड़छाड़ करने की आवश्यकता नहीं है z-indexक्योंकि :beforeमुख्य सामग्री स्वचालित रूप से समाप्त हो जाती है। (वर्तमान में क्रोम और एफएफ में परीक्षण किया गया है।)
background-repeat: no-repeat; background-attachment: fixed; background-position: center; भीतर जोड़ना / चाह सकते हैं ।
1 div और कोई पारदर्शी छवि के साथ समाधान:
आप मल्टीब्लैकग्राउंड CSS3 की सुविधा का उपयोग कर सकते हैं और दो पृष्ठभूमि रख सकते हैं: एक छवि के साथ, दूसरा उस पर पारदर्शी पैनल के साथ (क्योंकि मुझे लगता है कि पृष्ठभूमि छवि की अस्पष्टता को सीधे सेट करने का कोई तरीका नहीं है):
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;आप उपयोग नहीं कर सकते rgba(255,255,255,0.5)क्योंकि अकेले ही इसे केवल पीठ पर स्वीकार किया जाता है, इसलिए आपने इस उदाहरण के लिए प्रत्येक ब्राउज़र के लिए उत्पन्न ग्रेडिएंट का उपयोग किया है (इसीलिए यह इतना लंबा है)। लेकिन अवधारणा निम्नलिखित है:
background: tranparentColor, url("myImage"); यदि आपको केवल पृष्ठभूमि-छवि के लिए ढाल सेट करने की आवश्यकता है :
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);मैंने इसे देखा और CSS3 में अब आप इस तरह से कोड रख सकते हैं। कहते हैं कि मैं चाहता हूं कि यह पूरी पृष्ठभूमि को कवर करे मैं ऐसा कुछ करूंगा। तब hsla(0,0%,100%,0.70)या आरजीबीए के साथ आप एक सफेद पृष्ठभूमि का उपयोग करते हैं जो भी प्रतिशत संतृप्ति या अस्पष्टता के रूप में आप अपनी इच्छा को प्राप्त करते हैं।
.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;
}आप इसे प्राप्त करने के बाद CSS psuedo चयनकर्ता :: का उपयोग कर सकते हैं। यहाँ एक कार्यशील डेमो है।
.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>मेरा मुद्दा भी ऐसा ही था। मेरे पास एक छवि थी और पारदर्शिता को कम करना चाहता था और छवि के पीछे एक काली पृष्ठभूमि थी। अस्पष्टता को कम करने या एक काले रंग की पृष्ठभूमि या किसी भी माध्यमिक डिव को बनाने के बजाय मैंने छवि को एक रेखा पर सभी के लिए रैखिक-ढाल निर्धारित किया है:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");मैंने @ डैन ईस्टवेल के उत्तर का उपयोग किया है और यह बहुत अच्छा काम करता है। कोड उसके कोड के समान है लेकिन कुछ अतिरिक्त के साथ।
.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;
}एक साधारण छवि के लिए इसे करने का एक शानदार तरीका यह है कि ऐसा करने के लिए HTML तत्व की पृष्ठभूमि सेट करने के लिए केवल CSS का उपयोग किया जाए।
HTML {
background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
width: 100%;
height: 100%;
}यदि आप फैंसी प्राप्त करना चाहते हैं , और इसकी अस्पष्टता निर्धारित करते हैं, तो, IE9 + * में, आप शरीर का पारदर्शी पृष्ठभूमि रंग सेट कर सकते हैं। यह छवि को चकाचौंध करने के लिए सफेद रंग के उपरिशायी द्वारा काम करता है, और शानदार दिखाई देता है। उदाहरण के लिए, 75% अस्पष्टता ( rgba(255,255,255,.75)) के साथ सफेद निम्नलिखित प्रभाव पैदा करेगा।
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: relative, जबकि शरीर है position: absolute। यह शरीर के पृष्ठभूमि रंग को शरीर में हाइलाइटर की तरह व्यवहार करने से रोकना है।यह भी तुलनीय कुछ करने के लिए विस्तार किया जा सकता है, लेकिन अभी भी बहुत अलग से, शरीर के RGBA रंग पृष्ठभूमि के आसपास बदलकर सीएसएस फिल्टर। उदाहरण के लिए, rgba(0,255,0,.75)एक बहुत ही हरे रंग की टिंट बनाएगा जैसा कि आप कोड स्निपेट में देख सकते हैं।
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)कुछ के रूप में उदाहरण के रूप में व्याख्या करता है {red:0, green:255, blue:0, alpha:'75%'}।* Can I Use में एक पूर्ण संगतता तालिका पाई जा सकती है । हालाँकि, कृपया यह भी ध्यान दें कि आपको यह दिखाने के लिए "शो ऑल" पर क्लिक करने की आवश्यकता है कि IE9 इसका समर्थन करता है।
चूंकि मैंने पहले ही सवाल का जवाब दे दिया है, लेकिन मेरे पास और भी बहुत कुछ है, जिसे मैं जोड़ना चाहता हूं, मैं इस खंड परिशिष्ट का शीर्षक दे रहा हूं और इसमें कुछ आवश्यक जानकारी जोड़ रहा हूं। इसलिए, उपरोक्त सामग्री पर और भी अधिक एक्सट्रपलेशन करने के लिए, आप दुष्ट भयानक चीजों को करने के लिए एक पृष्ठभूमि छवि के रूप में एक एसवीजी का उपयोग कर सकते हैं। उदाहरण के लिए, आप एक लोडिंग स्क्रीन पृष्ठभूमि बना सकते हैं जिसमें एक शांत वेबसाइट आइकन हो सकता है जैसा कि आप नीचे बेस 64 एनकोडेड एसवीजी के उदाहरण में देख सकते हैं।
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 सीएसएस पृष्ठभूमि में एसवीजी लोगो HTML तत्व के आकार के आकार दिया जा करने के लिए कारण बनता है।वैसे केवल बैकग्राउंड ट्रांसपेरेंसी करने का एकमात्र CSS तरीका है, RGBaलेकिन जब से आप एक इमेज का उपयोग करना चाहते हैं, तो मैं इमेज को पारदर्शी बनाने के लिए फ़ोटोशॉप या जिम्प का उपयोग करने और फिर इसे बैकग्राउंड के रूप में उपयोग करने का सुझाव दूंगा।
opactiy: 1;आरजीबीए ही नहीं।
background-imageएक कंटेनर पर शैली सेट कर रहा है और फिर opacityउसी तत्व पर एक शैली सेट कर रहा है। यह पाठ और उस तत्व की अन्य सामग्री को भी पारदर्शी बना देगा। यदि आप मुझ पर विश्वास नहीं करते हैं तो यह आज़माएँ: w3schools.com/Css/tryit.asp?filename=trycss_transparency
मैंने सिर्फ पोजीशन जोड़ी = निरपेक्ष, शीर्ष = 0, चौड़ाई = 100% # मेन में और ऑप्सियस वैल्यू को # बैकग्राउंड में सेट किया
#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}मैंने मुख्य से पहले पृष्ठभूमि को एक div पर लागू किया।
मैं इस पोस्ट पर आया क्योंकि मेरे पास एक ही मुद्दा था तो मैंने सोचा कि सीएसएस के साथ गड़बड़ क्यों है, मूल्यों को समायोजित करना और ताज़ा करना जब आप आसानी से फ़ोटोशॉप में अस्पष्टता को समायोजित कर सकते हैं? छवि को कॉपी करें, इसे एक नई परत के रूप में पेस्ट करें फिर अपारदर्शिता स्लाइडर को स्थानांतरित करें।
opacity: ...सभी ब्राउज़रों में निर्दिष्ट कर सकते हैं , तो यह बेहतर है!