CSS3 বক্স-ছায়ায় স্বচ্ছতা স্থাপন করা কি সম্ভব?

Question

বাক্সের ছায়ায় স্বচ্ছতা স্থাপন করা কি সম্ভব?

এটি আমার কোড:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

Answer 1

আমি মনে করি rgba()এখানে কাজ করবে। সর্বোপরি, উভয়ের জন্য ব্রাউজার সমর্থন box-shadowএবং rgba()মোটামুটি একই।

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

Comments

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

— জার্কার্ক

@ জেরেমি ক্লার্কে আমি একই সমস্যার মুখোমুখি হয়েছি যেখানে প্রতিটি ব্যাকগ্রাউন্ডের জন্য একটি অনন্য ছায়া বর্ণ নির্ধারণ না করে একাধিক পটভূমির রঙগুলিতে কাজ করার জন্য আমার বোতামের ছায়া দরকার। স্বচ্ছ কালো সত্য ছায়ার মতো কাজ করে।

— বেলারুশ ডিগনাস

rgba () আমার জন্য কাজ করে না, যদি আমি ক্রোমের পরিবর্তন করতে চাইinput:-webkit-autofill

— স্যামুয়েল

এটি সর্বদা ক্রোম, তাই না

— BoltClock

@ ক্রিস কে: আমি আশঙ্কা করছি আপনি মূল বাক্স-ছায়ার ঘোষণার থেকে আলাদাভাবে এটি করতে পারবেন না। সবচেয়ে কাছের আপনি আরজিবা () এবং সিএসএস ভেরিয়েবলগুলি পেতে পারেন তবে এর অর্থ হল নামযুক্ত রঙগুলির জন্য কোনও সমর্থন নেই এবং আপনাকে বাক্স-ছায়া ঘোষণায় নিজেই ভেরিয়েবল প্রয়োগ করতে হবে। পটভূমি-রঙ একটি অনুরূপ সীমাবদ্ধতা, ঢাকা হয়েছে এখানে । আরো দেখুন stackoverflow.com/questions/40010597/...

— BoltClock