আমি কীভাবে কম সংকলক দিয়ে একটি হেক্সাডেসিমাল রঙকে আরগবাতে রূপান্তর করব?

Question

আমার কাছে নিম্নলিখিত কোড রয়েছে:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

আমি রূপান্তর করতে হবে @colorকরতে rgba(209, 72, 54, 1)।

সুতরাং আমার কোডটিতে rgba(209, 72, 54, 1)আমার একটি কম ফাংশন প্রতিস্থাপন করতে হবে যা rgba()আমার @colorভেরিয়েবল থেকে একটি মান জেনারেট করে ।

আমি কীভাবে কম দিয়ে এটি করতে পারি?

Comments

Fadein / fadeout / বিবর্ণ ফাংশন আপনার প্রয়োজন অনুযায়ী না? lesscss.org/#references

— cimmanon

Answer 1

প্রকৃতপক্ষে, কম ভাষাটি এম্বেড করা ফাংশন সহ আসে fade। আপনি একটি রঙের অবজেক্ট এবং পরম অস্বচ্ছতা% (উচ্চ মানের মানে কম স্বচ্ছ) পাস করেন:

fade(@color, 50%);   // Return @color with 50% opacity in rgba

Comments

@ সোসাইটি ওপি-র প্রশ্নের উত্তর দিয়েছিল, তবে আপনি আমাদের উত্তরটি দিয়েছেন প্রত্যেকটি এলএসই এখানে এসেছিলেন! ধন্যবাদ!

— বিলিএনয়ার

আমি মনে করি পরিমাণের প্যারামিটারটি স্বচ্ছতা স্তর নয় বরং বিপরীতভাবে অস্বচ্ছতা স্তরকে চিহ্নিত করে?

— মৌসিও

@ মমিও আসলে, বাছাইয়ের মাধ্যমে 50%, এটি সঠিকভাবে স্বচ্ছতা এবং অস্বচ্ছতা উভয়ই। :)

— ডেম পিলাফিয়ান

@mousio আপনি কি সত্যিই প্রযুক্তিগত পেতে চান, আমি বিশ্বাস করি আরো নিখুঁতভাবে "অস্বচ্ছ" প্রতিটি পিক্সেল যা উপাদান প্রতিস্থাপক এর রঙ দিয়ে মিশান রঙ অনুপাত এর - দেখুন en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) তবে ব্যবহারিক দিক থেকে অবশ্যই আপনি ঠিক বলেছেন; শতাংশ বা দশমিক মানটি স্বচ্ছতা স্তরের নয়, অস্বচ্ছতার স্তরকে প্রতিনিধিত্ব করে!

— ব্রায়ান লেসি

রেকর্ডের জন্য এটি এপিআই-এর একটি ত্রুটি। আমি যতবার এটি ব্যবহার করতে চাইছি ততবার আমাকে এটি সন্ধান করতে হবে। তাদের কাছে বুদ্ধিমানের কাজ হবে যে বিদ্যমান আরজিবিএকে SASS- এর মতো একটি কম কল করে আনা হবে - rgba (@ কালারভ্যালু, .5) যেমন এটি আসল সিএসএস আরজিবা ঘোষণার মতো একই হিংকে আউটপুট দেয়। তবে ওহে, আমি হাহাকার করছি। :)

— দোয়াদওয়াদ

Answer 2

আপনার যদি একটি আলফা কী প্রয়োজন হয় না, আপনি কেবল রঙের হেক্সাডেসিমাল উপস্থাপনা ব্যবহার করতে পারেন। '1' এর একটি আলফা সহ একটি আরজিবা রঙ হেক্সাডেসিমাল মানের সমান।

এখানে এমন কিছু উদাহরণ তুলে ধরছি যে:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

এই কোডটি অনলাইনে পরীক্ষা করুন: http://lesstester.com/

Comments

এই ত্রুটিটি আমি কীভাবে পেয়েছি? error evaluating function 'red': Cannot read property '0' of undefined

— আলদি আনান্টো

এটি কিছুক্ষণের জন্য আপডেট করা হয়নি তবে কম পিএইচপি দিয়ে আমি নিম্নলিখিত ত্রুটিটি পেয়ে যাচ্ছি - ত্রুটিটি @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } হল - সিএসএস ফাইল (স্ক্রিন.বিহীন) সংকলন করা যায়নি: লাল রঙের জন্য প্রত্যাশিত রঙ (): ব্যাকগ্রাউন্ড-রঙে ব্যর্থ হয়েছে: rgba ( লাল (@colorGold), সবুজ (@colorGold), নীল (@colorGold), 0.3);

— ক্রিস

@ ক্রিস আপনি কম পিএইচপি দিয়ে এই কাজটি করার জন্য সরাসরি রঙ নির্ধারণ করতে পারবেন এটি বর্তমানের কম সংস্করণেও কাজ করে বলে মনে হয় উদাহরণটি আমি মানিয়ে নিয়েছি। @colorGold: #C6AF87;

— সেবাস্তিয়ান স্টিহল

@ সুতরাং এটিই আমার চূড়ান্ত সমাধান ছিল এবং এটি রঙিন ট্যাগগুলিতে মুড়িয়ে দেওয়ার জন্য আমার কী ধারণা আমাকে দিয়েছে তা আমি খুব শীঘ্রই খুঁজে পেয়েছি!

— ক্রিস

আমার কম ফাংশন, পরীক্ষা করে দেখুন stackoverflow.com/questions/14860874/...

— helpse

Answer 3

আমার কম মিশ্রণ:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

চেষ্টা করে দেখুন

সম্পাদনা: আইজি ফিল্টার বিকল্পের সাথে আরজিবিএ ব্যাকগ্রাউন্ডে দেখা গেছে: আই 99 উভয়ই রেন্ডার করে! , আমি মিশ্রণে কিছু লাইন যুক্ত করেছি।

Answer 4

দেখে মনে হচ্ছে সাম্প্রতিক কম আপডেট 3.81 দিয়ে আপনি rgba () ফাংশনে মাত্র দুটি যুক্তি ব্যবহার করতে পারেন।

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

এটি আমার পক্ষে কাজ করে তবে আমি এটি অফিসিয়াল ডকুমেন্টেশনে খুঁজে পাই না ।