আমি সিএসএসের রেফারেন্সগুলিতে দেখতে পারি কীভাবে চিত্রের স্বচ্ছতা সেট করতে হয় এবং কীভাবে একটি পটভূমি চিত্র সেট করতে হয় । তবে আমি কীভাবে এই দুটোকে একত্রিত করতে পারি একটি স্বচ্ছ পটভূমি চিত্র সেট করতে?
আমার একটি চিত্র রয়েছে যা আমি ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করতে চাই তবে এটি খুব উজ্জ্বল - আমি অস্বচ্ছতাটি প্রায় 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;মধ্যে #main: পর {...} ।
1 ডিভ এবং কোনও স্বচ্ছ চিত্র সহ সমাধান:
আপনি মাল্টিব্যাকগ্রাউন্ড 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;
}
এটি অর্জনের জন্য আপনি সিএসএস সিলেকড সিলেক্টর :: ব্যবহার করতে পারেন। এখানে একটি ওয়ার্কিং ডেমো রয়েছে।
.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 {
background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
width: 100%;
height: 100%;
}আপনি যদি অভিনবতা পেতে চান এবং তার অস্বচ্ছতা সেট করতে চান তবে, আই 9 + * এ আপনি শরীরের স্বচ্ছ পটভূমির রঙ সেট করতে পারেন। চিত্রটি আরও সাদা করে তুলতে এবং উজ্জ্বল বলে মনে হয় এটি আচ্ছাদনকারী স্বচ্ছ সাদা দিয়ে ওভারলে করে কাজ করে। উদাহরণস্বরূপ, 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(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%'}।* আমি ব্যবহার করতে পারি একটি সম্পূর্ণ সামঞ্জস্য টেবিল পাওয়া যাবে। তবে, দয়া করে নোট করুন যে আই 9 এটি সমর্থন করে তা দেখতে আপনার "সমস্ত দেখান" ক্লিক করতে হবে।
যেহেতু আমি ইতিমধ্যে প্রশ্নের উত্তর দিয়েছি তবে আমি আরও যুক্ত করতে চাই তাই আমি এই বিভাগটির সংযোজন শিরোনাম করছি এবং এটি কিছুটা সম্ভাব্য সহায়ক তথ্য যুক্ত করছি। সুতরাং, উপরের লিখিত সামগ্রীতে আরও এক্সট্রোপোলেটেড করার জন্য, আপনি দুষ্ট বিস্ময়কর কাজগুলি করতে ব্যাকগ্রাউন্ড চিত্র হিসাবে একটি এসভিজি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি দুর্দান্ত ওয়েবসাইট আইকন বিশিষ্ট একটি লোডিং স্ক্রিনের পটভূমি তৈরি করতে পারেন কারণ আপনি নীচে একটি বেস 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 সিএসএস পটভূমিতে করা SVG লোগো HTML উপাদান মাপ পুনরায় সাইজ করা কারণ।ওয়েল শুধুমাত্র ব্যাকগ্রাউন্ড স্বচ্ছতা করার একমাত্র সিএসএস উপায় হ'ল RGBaআপনি যেহেতু কোনও চিত্র ব্যবহার করতে চান আমি ছবি شاپ বা জিম্প ব্যবহার করে চিত্রটিকে স্বচ্ছ করতে এবং তারপরে এটি ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করার পরামর্শ দেব।
opactiy: 1;কেবল আরজিবিএ নয়।
background-imageস্টাইল সেট করা এবং তারপরে opacityএকই উপাদানটিতে একটি শৈলী সেট করা । এটি সেই উপাদানটির পাঠ্য এবং অন্যান্য সামগ্রীগুলিও স্বচ্ছ করে তুলবে। আপনি যদি আমাকে বিশ্বাস না করেন তবে এটি ব্যবহার করে দেখুন: w3schools.com/Css/tryit.asp?filename=trycss_transpender
আমি # মেইনে স্রেফ অবস্থান = পরম, শীর্ষ = 0, প্রস্থ = 100% যুক্ত করেছি এবং # ব্যাকগ্রাউন্ডে অস্বচ্ছতা মান সেট করেছি
#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}আমি ব্যাকগ্রাউন্ডটি মূলটির আগে একটি ডিভিতে প্রয়োগ করেছি।
আমি এই পোস্টটি জুড়ে এসেছি কারণ আমার একই সমস্যা ছিল তখন আমি ভেবেছিলাম যে কেন আপনি ফটোশপের অন্ধকারকে সহজেই সামঞ্জস্য করতে পারবেন তখন CSS এর সাথে গণ্ডগোল, মানগুলি সামঞ্জস্য করে এবং রিফ্রেশটি চাপুন কেন? চিত্রটি অনুলিপি করুন, এটিকে একটি নতুন স্তর হিসাবে আটকান তারপরে অস্বচ্ছ স্লাইডারটি সরান।
opacity: ...সমস্ত ব্রাউজারে নির্দিষ্ট করতে পারি , এটি আরও ভাল!