হোভারে কেবল কোনও rgba পটভূমির রঙের আলফা পরিবর্তন করা সম্ভব?

Question

আমার কাছে <a>পৃথক rgba ব্যাকগ্রাউন্ডের রঙের সাথে একই রকম ট্যাগগুলির একটি সেট রয়েছে of এটি কি একক সিএসএস শৈলীতে লেখা সম্ভব যা কেবল rgba বৈশিষ্ট্যের অস্বচ্ছতা পরিবর্তন করে?

কোডের একটি দ্রুত উদাহরণ:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a> 

এবং শৈলী

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

আমি যা করতে চাই তা হ'ল একটি একক শৈলী লিখুন <a>যা hর্ধ্বগতিতে theুকে গেলে অস্বচ্ছতা বদলে যাবে , তবুও রঙটি অপরিবর্তিত রাখবে।

কিছুটা এইরকম

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

Comments

যাইহোক, আপনার divউপাদানগুলিতে আপনার aউপাদানগুলি কী করছে ?

— BoltClock

@ বলটকলক এইচটিএমএল 5 ব্লক-স্তরীয় aউপাদানগুলিকে মঞ্জুরি দেয় ।

— মার্টেটর

@ মার্কেটর: ঠিক আছে। আমি সেটা মিস করেছি.

— BoltClock

@ বল্টক্লক এটিকে কোডের সবচেয়ে সহজতম উপায় বলে মনে হয়েছে, একটি একক aট্যাগের imgচারপাশে এবং পাঠ্যের চারপাশের অন্যটির বিপরীতে । এটি এইচটিএমএল 5 দ্বারা সমর্থিত তা একটি দুর্দান্ত বোনাস।

— ফায়ারলাইট

যখন এই প্রশ্নটি জিজ্ঞাসা করা হয়েছিল - CSS এর মাধ্যমে এটি সম্ভব ছিল না। এখন এটি সম্ভব - সিএসএস ভেরিয়েবলগুলির সাথে - যেমন আমি আমার নিজের

— জবাবটিতে

Answer 1

এটি এখন কাস্টম বৈশিষ্ট্যগুলির সাথে সম্ভব:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

এটি কীভাবে কাজ করে তা বোঝার জন্য, আমি কীভাবে একটি সিএসএস বর্ণের পরিবর্তনশীলটিতে অস্বচ্ছতা প্রয়োগ করব?

যদি কাস্টম বৈশিষ্ট্যগুলি কোনও বিকল্প না হয় তবে নীচের মূল উত্তরটি দেখুন।

---

দুর্ভাগ্যক্রমে, না, আপনাকে প্রতিটি পৃথক শ্রেণীর জন্য আবার লাল, সবুজ এবং নীল মান নির্দিষ্ট করতে হবে:

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

আপনি কেবলমাত্র মূলশব্দটিকে inheritসম্পত্তির মান হিসাবে ব্যবহার করতে পারেন এবং তারপরেও এখানে ব্যবহার inheritযথাযথ নয়।

Answer 2

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

• আপনি ইতিমধ্যে কোনও কিছুর জন্য psuedo-উপাদান ব্যবহার করছেন না; এবং
• আপনি ট্যাগে positionআপেক্ষিক বা পরম স্থির করতে পারেন<div>

বিকল্প 1: ::beforepsuedo- উপাদান:

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

বিকল্প 2: সাদা জিআইফ ওভারলে:

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

বিকল্প 3: box-shadowপদ্ধতি:

জিআইএফ পদ্ধতির ভিন্নতা, তবে পারফরম্যান্স সংক্রান্ত সমস্যা থাকতে পারে।

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

কোডপেন উদাহরণ: http://codepen.io/chrisboon27/pen/ACdka

Comments

ভাল উত্তর, ধন্যবাদ। আমি এই পদ্ধতির বিপরীতে তৃতীয় বিকল্পটি দরকারী এবং সহজ হিসাবে পেয়েছি: হোভার ব্যতীত অতিরিক্ত কিছু এবং হোভার ব্যবহারের জন্য ব্যবহার করবেন না: বাক্স-ছায়া: ইনসেট 0 0 0 99999px rgba (128,128,128,0.2)। এটি আমার জন্য প্রয়োজনীয় ছিল কারণ আমার সারিগুলি বিকল্প সাদা এবং হালকা ধূসর, সুতরাং আসল উত্তরটি সাদা পরিবর্তন করেনি।

— ডোভভ হেফেটজ

Answer 3

না, এটা সম্ভব নয়।

আপনি যদি এই ধরণের জিনিস করতে চান তবে আপনি একটি সিএসএস প্রি-প্রসেসর চেষ্টা করতে পারেন।

আমি যা দেখতে পাচ্ছিলাম তা থেকে কমপক্ষে কম এবং সাসের ফাংশন রয়েছে যা রঙগুলিকে আরও কম বা স্বচ্ছ করতে পারে।

Comments

আমি সবসময় এসসিএসএস / কম সম্পর্কে ভুলে যাই। সর্বদা. সম্ভবত আমার এগুলি ব্যবহার শুরু করতে হবে।

— বোল্টক্লক

এসসিএসএসে এটি ট্রান্সপারেন্টাইজ হয় ([রঙ], 0.8)। Sass-lang.com/docamentation/Sass/Script/…

— অ্যারিয়ান অ্যাকোস্টা

Answer 4

না, এটা সম্ভব নয়।

আপনি যদি ব্যবহার করতে চান তবে আপনাকে rgbaঅবশ্যই প্রতিটি মান এক সাথে নির্ধারণ করতে হবে। কেবলমাত্র আলফা পরিবর্তন করার কোনও উপায় নেই।

Answer 5

এখন এটি 2017 এবং এটি এখন দিয়ে এটি সম্ভব

সিএসএস কাস্টম বৈশিষ্ট্য / সিএসএস ভেরিয়েবল ( ক্যানিউজ )

সিএসএস ভেরিয়েবলের জন্য একটি ক্লাসিক ব্যবহারের ক্ষেত্রটি হ'ল কোনও সম্পত্তির মূল্যগুলির অংশগুলি পৃথক করার ক্ষমতা।

সুতরাং এখানে, পুরো আরজিবা এক্সপ্রেশনটি আবার একবারে না বলার পরিবর্তে - আমরা rgbaমানগুলি 2 ভাগে / ভেরিয়েবলগুলিতে বিভক্ত বা 'পৃথককরণ' করব (আরজিবি মানের জন্য একটি এবং আলফার জন্য একটি)

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

তারপরে, হোভার-এ আমরা এখন --alpha ভেরিয়েবলটি পরিবর্তন করতে পারি:

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

<a href="#">
  <div class="brown">Link 1</div>
</a>
<a href="#">
  <div class="green">Link 2</div>
</a>

কোডপেন

আরও পড়া:

সিএসএস ভেরিয়েবল (ড্যান উইলসন) এর সাথে সিএসএস বৈশিষ্ট্য পৃথককরণ

Answer 6

একটি বিকল্প আছে, আপনি মূল রঙের উপর একটি রৈখিক-গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড চিত্র যুক্ত করতে পারেন।

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

এছাড়াও, CSS3 ফিল্টার সম্পত্তি সহ, আপনি এটিও করতে পারেন, তবে মনে হচ্ছে এটি পাঠ্যের রঙ পরিবর্তন করবে

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

এখানে একটি jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

Comments

আমার পক্ষে এখন পর্যন্ত একমাত্র সন্তোষজনক উত্তর।

— আন্দ্রে এলরিকো

Answer 7

সহজ সমাধান:

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25); 
     }
   }
}

উদাহরণ: https://jsfiddle.net/epwyL296/14/

শুধু পটভূমির আলফা সঙ্গে খেলুন। যদি আপনি অন্ধকারের পরিবর্তে আলো চান তবে কেবল #০০০ কেএফএফ দ্বারা প্রতিস্থাপন করুন

Answer 8

:hoverহোভার ক্লাসে কেন একটি পৃথক অস্বচ্ছতা ব্যবহার এবং নির্দিষ্ট করে না ?

a:hover {
     opacity:0.6
}

Comments

কারণ এটি পুরো উপাদানকে প্রভাবিত করে।

— BoltClock

এসভিজি অবজেক্টের সাহায্যে এটি ব্যবহার করা সম্ভবfill-opacity

— এপ্রিলিয়ন

কেবলমাত্র পুরো উপাদানই নয়, সমস্ত শিশু উপাদানও।

— ড্যানিয়েল এফ

Answer 9

আমারও একই সমস্যা ছিল। আমার 18 টি আলাদা ডিভ ছিল যা বোতাম হিসাবে কাজ করেছিল এবং প্রত্যেকটি আলাদা রঙের সাথে কাজ করেছে। প্রত্যেকের জন্য রঙের কোডগুলি বের করার পরিবর্তে বা একটি ডিভ ব্যবহার করুন: ধোঁয়াটে পরিবর্তন করতে হোভার সিলেক্টর (যা সমস্ত শিশুকেই প্রভাবিত করে) আমি সিউডো-ক্লাস ব্যবহার করেছি: আগে @ ক্রিস বুনের উত্তরটিতে লাইক দেওয়ার আগে।

যেহেতু আমি পৃথক উপাদানগুলিতে রঙিন করতে চেয়েছিলাম, আমি ব্যবহার করেছি: স্বচ্ছ সাদা ডিভ তৈরি করার আগে: হোভার। এটি খুব বেসিক ওয়াশআউট।

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

CanIUse.com এর মতে, 2014 এর প্রথম দিকে এটির 92% সমর্থন থাকার মতো কিছু হওয়া উচিত (( http://caniuse.com/#feat=css-gencontent )

Answer 10

আপনি সিএসএস ভেরিয়েবলের সাহায্যে এটি করতে পারেন, যদিও এটি সামান্য অগোছালো।

প্রথমে আপনি যে রঙটি ব্যবহার করতে চান তার জন্য কেবল আরজিবি মানগুলি সহ একটি ভেরিয়েবল সেট করুন :

:root {
  --color-success-rgb: 80, 184, 60; 
}

তারপরে আপনি কোনও রঙের জন্য একটি আরজিবিএ মান নির্ধারণ করতে পারেন এবং এই ভেরিয়েবল থেকে আলফা মান বাদে সমস্ত কিছুই টানতে পারেন:

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

এটি দুর্দান্ত সুন্দর নয়, তবে এটি আপনাকে একই আরজিবি মানগুলি ব্যবহার করতে দেয় তবে একটি রঙের জন্য বিভিন্ন আলফা মান।

Comments

এটি সমস্যার যুক্তিসঙ্গত সমাধান। এবং, রঙের সাথে ভেরিয়েবলটি চালু :rootরাখতে হবে না, এটি উপাদানটির শ্রেণিতে থাকতে পারে, এটির বেস রঙটি সেট করে। ধন্যবাদ!

— ব্র্যাড

Answer 11

আপডেট: দুর্ভাগ্যক্রমে এটি করা সম্ভব নয়। আপনার দুটি পৃথক নির্বাচক লিখতে হবে:

a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

ডাব্লু 3 সি অনুসারে, rgbaসম্পত্তিটির inheritমান / সমর্থন নেই ।

Comments

সমস্যাটি হ'ল এটি inheritএকটি বৈধ ফাংশন যুক্তি নয়। আপনি লক্ষ্য করবেন যে এটি কোনও অন্য সিএসএস ফাংশনের সাথে কাজ করে না।

— BoltClock

ফাংশন করে আপনি ভালো জিনিস বোঝাতে চেয়েছেন rgbaএবং transitions? কারণ আমি জানি এটি বেশ কয়েকটি বৈশিষ্ট্যের সাথে সমর্থিত।

— আইইপ

হ্যাঁ, পাশাপাশি url(), attr()এছাড়াও। inheritশুধুমাত্র একটি সম্পত্তি মূল্য।

— BoltClock

আমি url()ইতিমধ্যে সম্পর্কে এবং ট্রানজিশন জানতাম । আমি মাত্র 100% নিশ্চিত ছিলাম না rgbaকারণ এটি রঙের জন্য ব্যবহৃত হয়। আমাকে শিক্ষিত করার জন্য আপনাকে ধন্যবাদ :)!

— আইপ

Answer 12

আমিও একই সমস্যার মুখোমুখি হয়েছি। আমি যা করেছি তা এখানে রয়েছে এবং এটি only alpha changes on hover and also the text is not affectedনিম্নলিখিত পদক্ষেপগুলি দ্বারা কার্যকর ( ) করে:

1) আপনি যে কোনও উপাদানটির ব্যাকগ্রাউন্ড আলফা পরিবর্তন করতে চান তার জন্য একটি হাইলাইটেড (বা আপনার পছন্দের যেকোন একটি) বর্গ প্রয়োগ করুন।

2) পটভূমির রঙটি rgba পান

3) এটিকে স্ট্রিংয়ে রাখুন এবং হোভারে (মাউসেন্টার এবং মাউসলেভ) যেমন আপনি চান তেমন এটিকে আলফা পরিবর্তন করুন ip

এইচটিএমএল কোড:

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

সিএসএস কোড:

.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}

জাভাস্ক্রিপ্ট কোড:

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

ওয়ার্কিং ফিডল: http://jsfiddle.net/HGHT6/1/

Answer 13

opacityআপনি যদি সামান্য পরিবর্তনকে সামঞ্জস্য করতে পারেন তবে এটি সহজ সমাধান background-color:

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}

Answer 14

এটি সহজ উপায় সম্পর্কে; এটি আপনার সিএসএস স্টাইলশিটে রাখুন:

a:hover { color : #c00; } 

সম্পন্ন!

Comments

- শুধু রঙের সাথে কিছু মিলিয়ে দিন। অস্বচ্ছতা সমস্ত ব্রাউজারে কাজ করে না।

— ড। নাল

আপনার উত্তরের একটি দুর্দান্ত কৌশল আছে তবে আপনার মন্তব্য সম্পূর্ণ অপ্রাসঙ্গিক।

— BoltClock