সিএসএসে কীভাবে দ্বি পটভূমির রঙ স্বচ্ছ করবেন

Question

আমি CSS3 ব্যবহার করছি না। সুতরাং আমি ব্যবহার opacityবা filterগুণাবলী করতে পারি না । এই বৈশিষ্ট্যগুলি ব্যবহার না করে আমি কীভাবে background-colorএকটি এর স্বচ্ছ করতে পারি div? এটি এই লিঙ্কে পাঠ্য বাক্সের উদাহরণ হতে হবে । এখানে পাঠ্য বাক্সের পটভূমির রঙ স্বচ্ছ। আমি একই করতে চাই, তবে উপরে বর্ণিত বৈশিষ্ট্যগুলি ব্যবহার না করেই।

Comments

সিএসএস 3 বৈশিষ্ট্যও নয় opacitynor filterআপনি কেন সেগুলি ব্যবহার করতে পারবেন না বলে মনে করেন?

— পেক্কা

আমি জানি না, আমার Eclipse जुनোতে উভয় বৈশিষ্ট্য দেখানো হয়নি এবং ডাব্লু 3 স্কুল অনুসারে: দ্রষ্টব্য: সিএসএস অস্বচ্ছতা সম্পত্তি ডাব্লু 3 সি সিএসএস 3 সুপারিশের একটি অংশ। এখানে

— Mistu4u

এবং আমার গ্রহনটি সিএসএস 3 সমর্থন করে না! :(

— Mistu4u

আমি বলব আপনি এই বার্তাগুলি উপেক্ষা করতে পারেন। কিছু বৈশিষ্ট্যগুলি চশমার বাইরে কিন্তু বাস্তব বিশ্বে এখনও ব্যবহারযোগ্য। একটি সংমিশ্রণ opacity, filterএবং এখানে দেখানো হয়েছে কিছু অন্যান্য বৈশিষ্ট্যাবলী: css-tricks.com/css-transparency-settings-for-all-broswers প্রায় কাছাকাছি প্রতিটি ব্রাউজারের আবরণ হবে আছে

— Pekka

কেবল ব্যাকগ্রাউন্ড কালারে রঙের সিএসএস অস্পষ্টতার

— ডেভ জার্ভিস

Answer 1

অস্বচ্ছতা আপনাকে স্বচ্ছতা বা স্বচ্ছতা দেয়। এখানে একটি উদাহরণ দেখুন ।

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

দ্রষ্টব্য: এগুলি CSS3 বৈশিষ্ট্য নয়

Http://css-tricks.com/snippets/css/cross-browser-opacity/ দেখুন

Comments

"সুতরাং আমি অস্বচ্ছতা বা ফিল্টার বৈশিষ্ট্যগুলি ব্যবহার করতে পারি না"

— জার্সকা

@ জার্সকা এটি এমন একটি ভিত্তি যা প্রশ্নবিদ্ধ হওয়া দরকার। এই বৈশিষ্ট্যগুলি ব্যবহার না করার একমাত্র কারণ বলে মনে হয় যে তার আইডিই তাদের সম্পর্কে অভিযোগ করছে

— পেক্কা

সুতরাং যে acicive অন্য কোন উপায় আছে?

— মিস্টু

@ সুবীর আপনার যদি অন্য কোনও পথের প্রয়োজন হয় তবে জারস্কার উত্তর দেখুন। তবে যেমনটি বলা হয়েছে, আপনি কেন opacityপ্রথম স্থানে এড়াতে চান তা সন্দেহজনক বলে মনে হচ্ছে ।

— পেক্কা

পোস্টার একটি অস্বচ্ছ ব্যাকগ্রাউন্ড চেয়েছিল, একটি অস্বচ্ছ উপাদান নয়। অস্বচ্ছ পদ্ধতিটি ব্যবহার করে উপাদানটির পাঠ্যও অস্বচ্ছ হবে। এই উত্তরটি সরবরাহের জন্য যথেষ্ট নয়। ফ্যালব্যাক পিএনজি সহ আরজিবা ব্যবহার করা আরও ভাল।

— রেনি

Answer 2

সমস্যাটি opacityহ'ল এটি সামগ্রীতেও প্রভাব ফেলবে, যখন আপনি প্রায়শই এটি ঘটে না চান।

আপনি যদি চান যে আপনার উপাদানটি স্বচ্ছ হোক, এটি সত্যিকারের মতোই সহজ:

background-color: transparent;

তবে আপনি যদি এটি রঙিন হতে চান তবে আপনি ব্যবহার করতে পারেন:

background-color: rgba(255, 0, 0, 0.4);

অথবা (ক পটভূমি চিত্র সংজ্ঞায়িত 1pxদ্বারা 1px) ডান সংরক্ষিত alpha।
(তাই, ব্যবহার করার জন্য Gimp, Paint.Netবা অন্য কোন ইমেজ সফটওয়্যার যা আপনি যে কাজ করতে পারেন।
একটি নতুন ইমেজ তৈরি, পটভূমি মুছে দিন এবং PNG এটা সংরক্ষণ এটি একটি আধা স্বচ্ছ রঙ করা, তারপর।)

বলেছেন হিসাবে রেনে , কি ভাল জিনিস উভয় মিশে সঙ্গে হবে rgbaপ্রথম ও 1pxদ্বারা 1pxএকটি ফলব্যাক হিসাবে ইমেজ যদি ব্রাউজার আলফা সমর্থন করে না:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

আরও দেখুন : http://www.w3schools.com/cssref/css_colors_legal.asp ।

ডেমো : আমার জেএসফিডাল

Comments

অন্যান্য উত্তরে মন্তব্য হিসাবেও টাইপ করা হয়েছে। সবচেয়ে ভাল জিনিসটি rgba রঙিন এবং এই উত্তরে বর্ণিত png ফ্যালব্যাক হিসাবে ব্যবহার করবে।

— রেনি

পটভূমির রঙের বৈশিষ্ট্যে 'স্বচ্ছ' ব্যবহারের সরলতার উপর দুষ্টতা। মেগা কুডোস!

— tfont

Answer 3

স্বচ্ছ হ'ল ব্যাকগ্রাউন্ড-রঙের জন্য ডিফল্ট

http://www.w3schools.com/cssref/pr_background-color.asp

Comments

হ্যাঁ. ব্যাকগোরিন্ড-রঙের এমডিএন অনুসারে ব্যাকগ্র্যান্ড-রঙের প্রাথমিক মান স্বচ্ছ, এবং এটি উত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তি নয়। সুতরাং, ডিফল্ট স্বচ্ছ।

— ড্যান ক্রোন

Answer 4

Https://developer.mozilla.org/en-US/docs/Web/CSS/background-color থেকে

পটভূমি রঙ সেট করতে:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

Answer 5

আলোচনায় দেরি হতে পারে তবে অনিবার্যভাবে কেউ আমার পোস্টের মতো এই পোস্টে হোঁচট খাবে। আমি যে উত্তরটি সন্ধান করছিলাম তা পেয়েছি এবং ভেবেছিলাম যে আমি এটির নিজের পোস্টটি পোস্ট করব। নীচের জেএসফিডেল স্বচ্ছতার সাথে .PNG এর স্তর কীভাবে অন্তর্ভুক্ত করবেন includes ডিভের সিএসএসের জন্য স্বচ্ছতার বৈশিষ্ট্য সম্পর্কে জারস্কার উল্লেখটি সমাধান হ'ল: http://jsfiddle.net/jyef3fqr/

এইচটিএমএল:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

সিএসএস:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

জাতীয়:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

এবং আমার আসল অনুপ্রেরণা: http://jsfiddle.net/5g1zwLe3/ আমি স্বচ্ছ পিএনজি তৈরির জন্য পেইনট নেটও ব্যবহার করেছি বা বরং পিএনজির স্বচ্ছ বিজি দিয়েছি।

Answer 6

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

Comments

আপনার উত্তরের জন্য কিছু ব্যাখ্যা সরবরাহ করুন এবং কেবল উত্তর পোস্ট করা এড়ানো avoid

— সাইদ ঝিয়ানি