শিশু উপাদানগুলিকে প্রভাবিত না করে ব্যাকগ্রাউন্ড চিত্রের অস্বচ্ছতা সেট করুন

Question

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

উদাহরণ

পাদলেখের সমস্ত লিঙ্কের একটি কাস্টম বুলেট (পটভূমি চিত্র) প্রয়োজন এবং কাস্টম বুলেটটির অস্বচ্ছতা 50% হওয়া উচিত।

এইচটিএমএল

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

সিএসএস

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

আমি কি চেষ্টা করেছি

আমি তালিকার আইটেমগুলির অস্বচ্ছতা 50% এ সেট করার চেষ্টা করেছি, তবে লিঙ্ক পাঠ্যের অস্বচ্ছতাও 50% - এবং শিশু উপাদানগুলির অস্বচ্ছতা পুনরায় সেট করার কোনও উপায় বলে মনে হচ্ছে না:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

আমি আরজিবাও ব্যবহার করার চেষ্টা করেছি, তবে ব্যাকগ্রাউন্ড চিত্রটিতে এর কোনও প্রভাব নেই:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Comments

stackoverflow.com/a/6502295/218125

— সাইফার

সম্পর্কিত স্ট্যাকওভারফ্লো.com

— অ্যাড্রিয়েন

Answer 1

আপনি সিএসএস এর linear-gradient()সাথে ব্যবহার করতে পারেন rgba()।

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Comments

এটিই সেরা সমাধান!

— ডিজেনিস এইচ।

Answer 2

আপনার চিত্রকে একটি চিত্র সম্পাদক হিসাবে নিয়ে যান, অস্বচ্ছতাটি নীচে পরিণত করুন, এটি .png হিসাবে সংরক্ষণ করুন এবং পরিবর্তে এটি ব্যবহার করুন।

Comments

হুম ... আমি কেবল উজ্জীবিত হয়েছি, তবে এই গৃহীত উত্তরটি দেখুন: stackoverflow.com/a/6502295/131809 10 বার upvated , এবং বেশ অনেকটা অভিন্ন।

— অ্যালেক্স

এটি একটি ভাল বিকল্প, এতগুলি ডাউনভোট কেন, কোনও ধারণা নেই। আমি যদি এই দুটি বার upvote করতে পারে। আংশিক অস্বচ্ছ অভিভাবক উপাদানটির একটি শিশু উপাদান আংশিক অস্বচ্ছ হতে চলেছে, এবং হওয়া উচিত। সমস্ত "workaround" বাগগুলি যা শেষ পর্যন্ত ঠিক করা উচিত।

— রবডাব্লু

@mystrdat আপনি ইতিমধ্যে ছবিটি ডাউনলোড করছেন, এটি কোনও অতিরিক্ত অনুরোধ নয়।

— ব্র্যাড

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

— ব্র্যাড

@ ব্র্যাড আমি ক্ষমা চেয়েছি, দেখা যাচ্ছে যে প্রশ্নটি আমি এখন আবার ভুল করে দেখেছি wrong

— mystrdat

Answer 3

এটি প্রতিটি ব্রাউজারের সাথে কাজ করবে

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

আপনি যদি পুরো পাত্রে এবং তার শিশুদেরকে প্রভাবিত করতে স্বচ্ছতা না চান তবে এই কর্মসংস্থানটি পরীক্ষা করে দেখুন। অপেক্ষাকৃত পজিশন পিতামাতার সাথে আপনার অবশ্যই একান্ত পজিশন সন্তান থাকতে হবে।

Http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-eferences/ এ ডেমো পরীক্ষা করুন

Comments

আমার মনে হয় আপনার সরাসরি উপরের কোডের "উদ্ধৃতিগুলি" পরিবর্তন করতে হবে যাতে সরাসরি অনুলিপি-পেস্ট করার সময় এটি কাজ করার জন্য

— nsantorello

এই উত্তরটি কি এখনও সমস্যার সর্বোত্তম সমাধান লোকেরা খুঁজে পেয়েছে: "কীভাবে একটি শিশু উপাদানকে পিতাম উপাদানটির সিএসএস অস্বচ্ছতা মান হিসাবে উত্তরাধিকারী করা যায় না"? আমার সত্যিকারের একটি শিশু হওয়া দরকার ... এবং নথির প্রবাহে ... এবং এর জন্য জাভাস্ক্রিপ্ট / ফ্ল্যাশ আনতে চাই না; খাঁটি সিএসএস পছন্দ করুন।

— গোবিন্দ

আমার কাছে 50% অস্বচ্ছ প্যারেন্ট <li> এর চাইল্ড ইমেজ রয়েছে যা আমি 100% অস্বচ্ছ চাই। <li> এ position:relative;এবং ইমগ সেট করা position:absolute;আমাকে ইমগের উপর উত্তরাধিকারসূত্রে প্রাপ্ত অস্বচ্ছতাটিকে ওভাররাইড করার অনুমতি দেয় না এবং আমি <li> এর নিজের জন্য নিখুঁত অবস্থান ব্যবহার করতে পারি না (এটি একটি গোলযোগ ;-)। জাভাস্ক্রিপ্টে আমি চেষ্টা করেছি imgs[i].style.opacity = '1';, তবে এটি উত্তরাধিকারসূত্রে প্রাপ্ত অস্বচ্ছতা ওভাররাইড করার জন্যও কাজ করে না। আমি যদি সঠিকভাবে বুঝতে পারি তবে আমি আরজিবিএও ব্যবহার করতে পারছি না কারণ কেবল ইমামগুলিই কেবল তাদের ব্যাকগ্রাউন্ডের রঙকেই প্রভাবিত করতে হবে না। আমার জন্য কারও সুপারিশ আছে?

— গোবিন্দ 21

এই পুরো উত্তরটির কোনও অর্থ নেই। প্রদত্ত কোডটি সর্বোপরি প্রশ্নকর্তা ঠিক কী করতে চান না কারণ এটি কাজ করে না, বর্ণনার সাথে মিলছে না বা লিঙ্কটি। এত লোক কেন এটিকে আপলোড করেছে তা বোঝার জন্য আমার খুব কষ্ট হচ্ছে।

— BoltClock

যদি প্রশ্নটি ছিল 'কোনও উপাদানের উপর 50% স্বচ্ছতা কীভাবে সেট করা যায়', তবে এটি একটি উত্তরের উত্তর হবে।

— lharby

Answer 4

আপনি যদি বুলেট হিসাবে চিত্রটি ব্যবহার করেন তবে আপনি সিউডো উপাদানটির আগে এটি বিবেচনা করতে পারেন।

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Comments

ফিল্টারটি কেবলমাত্র একটি আইইল সমাধান

— হুসেন

আমি মনে করি এটি সম্ভবত সেরা সমাধান। এটি একটি খাঁটি সিএসএস সমাধান। এটি ব্যবহার করে আইআই 7 সমর্থন হ্যাক করাও সম্ভব *zoom: expression( … );(দেখুন : পরে এবং পরে: সিএসএস সিউডো উপাদানগুলি আইই 7 এর জন্য হ্যাক করার আগে ), তবে আই 7 শেষ পর্যন্ত পাস হয়ে যাচ্ছে é

— থার্ডেন্ডার

Answer 5

আপনি ছবিটি ডিভের মধ্যে রাখতে পারেন: পরে বা ডিভ: পূর্বে এবং সেই "ভার্চুয়াল ডিভ" -এ অস্বচ্ছতা সেট করতে পারেন

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

এখানে পাওয়া গেছে http://css-tricks.com/snippets/css/transparent-background-images/

Answer 6

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

অস্বচ্ছতার সাথে হ্যাক .99 (1 এর চেয়ে কম) জেড-ইনডেক্স প্রসঙ্গ তৈরি করে যাতে আপনি বিশ্বব্যাপী জেড-সূচকের মানগুলির বিষয়ে চিন্তা করতে পারেন না। (এটি অপসারণ করার চেষ্টা করুন এবং দেখুন পরবর্তী ডেমোতে যেখানে প্যারেন্ট র‌্যাপারের ইতিবাচক জেড-সূচক রয়েছে সেখানে কী ঘটে))
যদি আপনার উপাদানটির ইতিমধ্যে জেড-সূচক থাকে তবে আপনার এই হ্যাকের দরকার নেই।

এই কৌশলটির ডেমো ।

Comments

আপনি কি জানেন কেন অস্বচ্ছতার জন্য আমাদের 1 টিরও কম মান সেট করতে হবে? এটি কি ক্রস-ব্রাউজার সমাধান?

— zVictor

@ZVictor হ্যাঁ, এটি ডাব্লু 3 সি-মানক আচরণ। সিএসএস জেড-ইনডেক্স বোঝা দেখুন : স্ট্যাকিং প্রসঙ্গ ।

— ব্যবহারকারীর

Answer 7

দুর্ভাগ্যক্রমে, এই উত্তরটি লেখার সময়, এটি করার সরাসরি কোনও উপায় নেই । তোমার দরকার:

1. পটভূমির জন্য একটি আধা স্বচ্ছ চিত্র ব্যবহার করুন (অনেক সহজ)।
2. আপনি যে শিশুদের অস্বচ্ছ চান তার পাশে একটি অতিরিক্ত উপাদান (ডিভের মতো) যুক্ত করুন, এটিতে পটভূমি যুক্ত করুন এবং এটি অর্ধ-স্বচ্ছ করার পরে, উল্লেখ করা বাচ্চাদের পিছনে রাখুন।

Answer 8

আর একটি বিকল্প হ'ল সিএসএস ট্রিকস পদ্ধতির একটি সিউডো উপাদানটি সুনির্দিষ্ট উপাদানটির সঠিক মাপের ঠিক পেছনের পেছনের অংশটিকে নকল করার জন্য এটির পিছনে মূল উপাদানটি সন্নিবেশ করানো approach কখনও কখনও আপনার সিউডো উপাদানটির জন্য একটি উচ্চতা নির্ধারণ করতে হবে।

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 9

"ফিল্টার" বৈশিষ্ট্যের জন্য, আই 7/8 এর জন্য কাজ করার জন্য ডাবলের পরিবর্তে অস্বচ্ছতার শতাংশের জন্য একটি পূর্ণসংখ্যার প্রয়োজন।

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

পিএস: আমি এটিকে উত্তর হিসাবে পোস্ট করি, তাই এসও, সম্পাদনার জন্য কমপক্ষে 6 টি পরিবর্তিত অক্ষর প্রয়োজন।

Answer 10

জিনিসগুলিকে সত্যিই সূক্ষ্ম-সুর করার জন্য, আমি ব্রাউজার-লক্ষ্যযুক্ত মোড়কে উপযুক্ত নির্বাচনগুলি রাখার পরামর্শ দিই। এটি তখনই আমার পক্ষে কাজ করেছিল যখন আমি আই 7 এবং আই 8 "অন্যদের সাথে ভালভাবে খেলতে" পেতাম না (যেমন আমি বর্তমানে একটি সফ্টওয়্যার সংস্থার হয়ে কাজ করছি যারা তাদের সমর্থন অব্যাহত রেখেছে)।

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

আমার উপরের কোডটিতে অপ্রয়োজনীয়তা থাকতে পারে - যদি কেউ এটিকে আরও পরিষ্কার করতে চান তবে নির্দ্বিধায়!

Comments

প্রতিটি ব্রাউজারকে আলাদাভাবে লক্ষ্য করা অপ্রয়োজনীয়, কেবলমাত্র একটি একক নির্বাচক ব্লকের মধ্যে ব্রাউজারের উপসর্গগুলি ব্যবহার করুন। ব্রাউজারের উপসর্গগুলির সাথে, ব্রাউজারটি কেবলমাত্র উপযুক্ত সিএসএস সম্পত্তি ব্যবহার করবে। যখন সময় চলে যায় এবং সেই সম্পত্তিটির বাক্য গঠনটি প্রমিত হয়ে যায়, ব্রাউজার বিক্রেতারা উপসর্গগুলির জন্য সমর্থন ছেড়ে দেবে এবং কোনও উপসর্গ ছাড়াই সিএসএস সম্পত্তি ব্যবহার করবে (উদাহরণস্বরূপ, -moz-border-radiusফায়ারফক্স 13 এ ফায়ারফক্সের জন্য সমর্থন বাদ দিয়েছে এবং border-radiusএখন কেবল প্রমিত সম্পত্তি অনুসন্ধান করবে)। আই 7 এবং আই 8 আলাদা গল্প, তবে এটি কেবল আইই :

— পি

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

— কোড-সুশি

@ কোড-সুশী: যদি আপনার মন্তব্যটি একই সময়ে ডাউনটোটটি ঘটেছিল, তবে বিবেচনা করুন যে এটি তৃতীয় ব্যক্তির মন্তব্যের সাথে একমত হয়ে ঘটেছে এমন অন্য কারও কাছ থেকে এসেছিল (মন্তব্যে নিজেই লক্ষ্য করুন)। আমি আপনার উত্তরে ভোট দিই নি তবে আমাকে একমত হতে হবে - আমি যুক্ত করতে চাই 1) কেএইচটিএমএল কখনই দেখতে পাবে না -khtml-opacityকারণ এটি মিডিয়া ক্যোয়ারী বোঝে না, এটি অকেজো রেন্ডার করে 2) আইই আপনার ভাবনার চেয়ে স্থিতিশীল; এটি "গাট্টা" হবে না কারণ আপনি আইই প্রয়োগ করে এমন কোনও নিয়মে নন-আইই উপসর্গ যুক্ত করেন। আপনি যখন সমস্যার মুখোমুখি হয়েছিলেন তখন সমস্যাটি অবশ্যই অন্য কোথাও থেকে এসেছিল।

— BoltClock

আমার আসল উত্তরটি প্রায় 2 বছর আগে থেকে হয়েছিল এবং ডাউন বছরের মত ভোট সম্প্রতি এই বছরের মত হয়েছিল। আমি শুধু কৌতুহলী ছিলাম. আইই মন্তব্য হিসাবে তারা 7 সম্পর্কিত যখন যখন এখনও সমর্থন প্রয়োজন; আমি বেশ নিশ্চিত যে এই মুহুর্তে IE 7 উপেক্ষা করা বেশিরভাগ ক্ষেত্রে এখন ঠিক আছে। আপনার প্রতিক্রিয়ার জন্য ধন্যবাদ।

— কোড-

Answer 11

যদি আপনাকে কেবল বুলেটটিতে অস্বচ্ছতা সেট করতে হয় তবে আপনি আলফা চ্যানেলটি সরাসরি চিত্রটিতে সেট করবেন না কেন? যাইহোক আমি মনে করি না যে পুরো উপাদানটির (এবং এর শিশুরাও) অস্পষ্টতা পরিবর্তন না করে CSS এর মাধ্যমে ব্যাকগ্রাউন্ড ইমেজে অস্বচ্ছতা সেট করার কোনও উপায় আছে।

Answer 12

কেবল উপরের অংশে যুক্ত করতে .. আপনি নতুন বর্ণ বৈশিষ্ট্যগুলি সহ আলফা চ্যানেলটি ব্যবহার করতে পারেন। rgba (0,0,0,0) ঠিক আছে তাই এটি কালো তবে পিতা বা মাতা হিসাবে এটি শূন্য অস্বচ্ছতার সাথে বাচ্চাকে প্রভাবিত করবে না। এটি কেবল ক্রোম, এফএফ, সাফারি এবং .... আমি পাতলা হেতে কাজ করে O

আপনার হেক্স রঙগুলি আরজিবিএতে রূপান্তর করুন

Comments

এটি background-imageওপির অনুরোধ অনুসারে কাজ করবে না ।

— টর্স্টেন ওয়াল্টার

Answer 13

আমি এই সমস্যাটি সম্পর্কে একটি খুব ভাল এবং সাধারণ টিউটোরিয়াল পেয়েছি। আমি মনে করি এটি দুর্দান্ত কাজ করে (এবং এটি IE সমর্থন করে তবে আমি আমার ক্লায়েন্টকে অন্য ব্রাউজারগুলি ব্যবহার করতে বলি):

আরজিবিএ এবং ফিল্টারগুলির মাধ্যমে শিশু উপাদানগুলিকে প্রভাবিত না করে CSS ব্যাকগ্রাউন্ড স্বচ্ছতা

সেখান থেকে আপনি গ্রেডিয়েন্ট সমর্থন ইত্যাদি যোগ করতে পারেন

Comments

ঠিক আছে, এটি সরাসরি কাজ করবে না। ব্যাকগ্রাউন্ড-কালারের সাথে আপনাকে একটি স্পষ্ট উপাদান হিসাবে ডিভ লাগাতে হবে: উদাহরণস্বরূপ

— ফ্রান্সিসকো

Answer 14

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

আপনি এই কোড চেষ্টা করতে পারেন। আমি মনে করি এটি কাজ করা হবে। আপনি ডেমো দেখতে পারেন