আমি কীভাবে একটি অর্ধ স্বচ্ছ পটভূমি করব?

Question

আমাকে অন্য কোনও কিছু প্রভাবিত না করে 50% স্বচ্ছ একটি সাদা পটভূমি তৈরি করতে হবে। আমি এটা কিভাবে করব?

Comments

এখানে একটি নিবন্ধের লিঙ্ক রয়েছে যা CSS ব্যবহার করে স্বচ্ছতা প্রয়োগের পদ্ধতি বর্ণনা করে। domedia.org/oveklykken/css-transporses.php সতর্কতা অবলম্বন করুন যদিও মনে হচ্ছে ক্রস ব্রাউজার সমর্থন এমন একটি সমস্যা হতে পারে যা আপনাকে আপনার বাস্তবায়ন পরিবর্তন করতে পারে।

— Bnjmn

আপনার অর্থ কীভাবে নেস্টেড উপাদানগুলিকে প্রভাবিত না করে ডিভ পটভূমিতে অস্বচ্ছতা সেট করবেন?

— বেন

সম্ভাব্য সদৃশ আমি পাঠ্য অথবা একটি চিত্র একটি স্বচ্ছ পটভূমি সিএসএস ব্যবহার করে কিভাবে দিতে হবে কেন?

— ড্যানিকোট্রা

দেখুন: stackoverflow.com/questions/806000/...

— danicotra

Answer 1

ব্যবহার rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

এটি আপনাকে 50% অস্বচ্ছতা দেবে যখন বাক্সের সামগ্রীতে 100% অস্বচ্ছতা থাকবে।

আপনি যদি ব্যবহার করেন opacity:0.5তবে সামগ্রীটি ব্যাকগ্রাউন্ডের সাথে ম্লান হয়ে যাবে। সুতরাং এটি ব্যবহার করবেন না।

Comments

হ্যাঁ, আইটি আরজিবা সমর্থন করে, এর বাক্য গঠনটি # আরজিবি এবং ফিল্টার হিসাবে লিখিত হয়েছে: প্রগ্রেড: ডিএক্সআইমেজট্রান্সফর্ম.মাইক্রোসফ্ট অ্যাড্রিয়েন্ট (স্টার্টকোলারস্টার = # এআরআরজিবিবিএএ, এন্ডকোলারস্ট্র = # এআরজিজিবিএএ); এটি মূলত একটি স্ট্যাটিক রঙের গ্রেডিয়েন্ট তবে স্বচ্ছতার সাথে।

— তরুণ

পরিবর্তন background:সঙ্গেbackground-color:

— Gabrielizalo

background-colorএর চেয়ে বেশি সঠিক নয় background।

— শান

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

— ডেভ স্লুটজকিন

@ ডেভস্লুটজকিন এটির পক্ষে একটি দুর্দান্ত পছন্দ এবং এতে কোনও ভুল নেই, তবে ব্যক্তিগত পছন্দকে ভিত্তিতে সম্পাদনা করা উচিত নয়। অন্যথায়, বিরোধী পছন্দগুলির সাথে লোকেরা মুখোমুখি হওয়ায় প্রশ্নগুলি বিভিন্ন সংস্করণের মধ্যে দোদুল্যমান থাকবে।

— শন

Answer 2

এটি কাজ করে তবে এই শ্রেণীর সাথে উপাদানটির সমস্ত শিশুরাও এটিকে প্রতিরোধের কোনও উপায় ছাড়াই স্বচ্ছ হয়ে উঠবে।

.css-class-name {
    opacity:0.8;
}

Answer 3

আপনি যদি স্বচ্ছ পটভূমি ধূসর করতে চান তবে, দয়া করে চেষ্টা করুন:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

Answer 4

জানা ভাল

কিছু ওয়েব ব্রাউজারের স্বচ্ছ পটভূমির উপরে ছায়াগুলির সাথে পাঠ্য রেন্ডার করতে সমস্যা হয়। তারপরে আপনি ব্যাকগ্রাউন্ড হিসাবে একটি আধা স্বচ্ছ 1x1 পিএনজি চিত্র ব্যবহার করতে পারেন।

বিঃদ্রঃ

মনে রাখবেন যে আই 6 পিএনজি ফাইলগুলি সমর্থন করে না।

Comments

আই 66 পিএনজিগুলি এমনকি স্বচ্ছদেরকে সমর্থন করে: ফিল্টার: প্রিভিড: ডিএক্সআইমেজট্রান্সফর্ম.মাইক্রোসফট.আল্ফাইমেজলোডার (সক্ষম = সত্য, সাইজিংমথোড = স্কেল, src = '/ filename.png');

— মান্মাল

@ মানমাল তবে আপনি আপনার আইই ফিক্সটি কোথায় রাখবেন? সরাসরি .css ফাইল সাইটে?

— থালাত্তা

@ থালাত্তা হ্যাঁ, এটি চেষ্টা করুন।

— মানমাল

Answer 5

1x1 আধা স্বচ্ছ পিএনজি ব্যবহার করবেন না। 10x10, 100x100 ইত্যাদি পর্যন্ত পিএনজি আকার করুন। (আমি একটি 200x200 পিএনজি ব্যবহার করেছি এবং এটি কেবল 0.25 কেবি ছিল, সুতরাং এখানে ফাইল আকারের বিষয়ে কোনও উদ্বেগ নেই))

এই পোস্টটি দেখার পরে, আমি স্বচ্ছতার সাথে 3, 1x1 পিএনজি দিয়ে আমার ওয়েব পৃষ্ঠা তৈরি করেছি।

ড্রিমউইভার সিএস 5 ট্যাঙ্কিং করছিল। আমি ডসকে ফ্ল্যাশ ব্যাক করছিলাম !!! স্পষ্টতই যে কোনও সময় আমি স্ক্রোল করার, পাঠ্য সন্নিবেশ করার, মূলত কিছু করার চেষ্টা করেছিলাম, ডিডাব্লু একবারে আধা স্বচ্ছ অঞ্চলগুলি 1x1 পিক্সেল পুনরায় লোড করার চেষ্টা করছিলাম ... হ্যাঁ!

অ্যাডোব টেক সমর্থন এমনকি সমস্যাটি কী তা জানত না, তবে আমাকে ফাইলটি পুনর্নির্মাণ করতে বলেছেন (এটি তাদের সিস্টেমে ঘটনাক্রমে কাজ করে)। আমি যখন প্রথম স্বচ্ছ পিএনজি সিএসএস ফাইলে লোড করেছিলাম তখনই ডকটি গভীরভাবে ঘুঘু করে।

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

Comments

আপনার সরঞ্জামটি এতটাই কৃপণ যে এটি সমর্থন করে না কারণ একটি পিএনজি আকার নির্ধারণ করছে? সত্যিই ...

— জুরিক্স

Answer 6

তারিখ থাকলেও, এই থ্রেডের একটিও উত্তর সর্বজনীনভাবে ব্যবহার করা যায় না। স্বচ্ছ রঙের মুখোশ তৈরি করতে rgba ব্যবহার করা - এটি ব্যাকগ্রাউন্ডের চিত্রগুলির সাথে কীভাবে করা যায় তা ঠিক ব্যাখ্যা করে না।

আমার সমাধান ব্যাকগ্রাউন্ড চিত্র বা রঙের ব্যাকগ্রাউন্ডের জন্য কাজ করে।

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

Answer 7

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

Comments

এই কোড স্নিপেটের জন্য আপনাকে ধন্যবাদ, যা কিছু সীমিত, তাত্ক্ষণিক সহায়তা সরবরাহ করতে পারে। একটি সঠিক ব্যাখ্যা কেন এটি সমস্যার একটি ভাল সমাধান তা দেখিয়ে তার দীর্ঘমেয়াদী মানকে ব্যাপকভাবে উন্নত করবে এবং ভবিষ্যতে পাঠকদের আরও অন্যান্য অনুরূপ প্রশ্নের সাথে আরও দরকারী করে তুলবে। আপনার অনুমানগুলি সহ কিছু ব্যাখ্যা যুক্ত করতে দয়া করে আপনার উত্তরটি সম্পাদনা করুন।

— iBug

Answer 8

এটা চেষ্টা কর:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}

Comments

এটি সামগ্রীতে 50% অস্বচ্ছতাও তৈরি করবে।

— তরুণ

এটি সহজেই CSS দ্বারা স্থির করা যায়: .transparent * { opacity:1; }উদাহরণস্বরূপ, transparentক্লাস সহ কোনও উপাদানটির অভ্যন্তরীণ এইচটিএমএল থাকে না

— টিম কুক