আমি কীভাবে একই উপাদানটিতে একটি পটভূমি-চিত্র এবং CSS3 গ্রেডিয়েন্ট একত্রিত করতে পারি?

Question

আমি কীভাবে আমার জন্য সিএসএস 3 গ্রেডিয়েন্ট ব্যবহার করব background-colorএবং তারপরে background-imageহালকা স্বচ্ছ টেক্সচারটি প্রয়োগ করতে একটি প্রয়োগ করব?

Comments

দ্রষ্টব্য: আপনি ব্যাকগ্রাউন্ড ইমেজ (15px কেন্দ্র) অবস্থান বা এটি 'পুনরাবৃত্তি' সম্পত্তিটি এভাবে সেট করতে পারেন (উদাহরণস্বরূপ ফায়ারফক্স ৩.+++ এর জন্য কাজ করে) কিছু শ্রেণির {পটভূমি: ইউআরএল ("../ আইকন.পিং") ন- 15px কেন্দ্র পুনরাবৃত্তি করুন, -মোজ-লিনিয়ার-গ্রেডিয়েন্ট (কেন্দ্র শীর্ষ, # এফএফএফএফএফ, # ডিডিডিডিডিডি);}

— জুলিয়েন

এসভিজি বা এসভিজি + সিএসএস যথাক্রমে ফ্ল্যাট টেক্সচার (শব্দ) বা টেক্সচার্ড গ্রেডিয়েন্ট তৈরি করতে ব্যবহার করা যেতে পারে।

— ক্লিন্ট পাচল

Answer 1

একাধিক ব্যাকগ্রাউন্ড!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

এই 2 টি লাইন গ্রেডিয়েন্টগুলি না করে এমন কোনও ব্রাউজারের ফালব্যাক। নীচে কেবল আইই <9 চিত্রগুলি স্ট্যাক করার জন্য নোটগুলি দেখুন।

• লাইন 1 একটি সমতল পটভূমির রঙ সেট করে।
• লাইন 2 ব্যাকগ্রাউন্ড চিত্র ফ্যালব্যাক সেট করে।

চূড়ান্ত লাইন ব্রাউজারগুলির জন্য একটি পটভূমি চিত্র এবং গ্রেডিয়েন্ট সেট করে যা সেগুলি পরিচালনা করতে পারে।

• লাইন 3 সমস্ত অপেক্ষাকৃত আধুনিক ব্রাউজারগুলির জন্য।

প্রায় সমস্ত বর্তমান ব্রাউজারের একাধিক পটভূমি চিত্র এবং CSS ব্যাকগ্রাউন্ডের জন্য সমর্থন রয়েছে have ব্রাউজার সহায়তার জন্য http://caniuse.com/#feat=css- গ্রেডিয়েন্টগুলি দেখুন । আপনার কেন একাধিক ব্রাউজার উপসর্গের দরকার নেই তা সম্পর্কে একটি ভাল পোস্টের জন্য, দেখুন http://codepen.io/thebabydino/full/pjxVWp/

স্তর স্ট্যাক

এটি লক্ষ করা উচিত যে প্রথম সংজ্ঞায়িত চিত্রটি স্ট্যাকের শীর্ষে থাকবে। এই ক্ষেত্রে, চিত্রটি গ্রেডিয়েন্টের শীর্ষে রয়েছে।

ব্যাকগ্রাউন্ড লেয়ারিং সম্পর্কিত আরও তথ্যের জন্য http://www.w3.org/TR/css3-background/#layering দেখুন ।

আইই <9 এর জন্য কেবল চিত্রগুলি স্ট্যাক করা (ঘোষণায় কোনও গ্রেডিয়েন্ট নেই)

আইই 9 এবং তার চেয়ে বেশি ছবি এইভাবে স্ট্যাক করতে পারে। আপনি এটি আই 9 এর জন্য গ্রেডিয়েন্ট ইমেজ তৈরি করতে ব্যবহার করতে পারেন, যদিও ব্যক্তিগতভাবে আমি করতাম না। তবে শুধুমাত্র চিত্রগুলি ব্যবহার করার সময় অবশ্যই লক্ষণীয়, যেমন <9 ফ্যালব্যাক বিবৃতি উপেক্ষা করবে এবং কোনও চিত্র প্রদর্শন করবে না। গ্রেডিয়েন্ট অন্তর্ভুক্ত করা হলে এটি ঘটে না। এক্ষেত্রে একটি ফ্যালব্যাক চিত্র ব্যবহার করার জন্য আমি আপনার ফ্যালব্যাক কোড সহ পল আইরিশের দুর্দান্ত শর্তযুক্ত HTML উপাদানটি ব্যবহার করার পরামর্শ দিচ্ছি :

.lte9 #target{ background-image: url("IMAGE_URL"); }

পটভূমি অবস্থান, আকার পরিবর্তন ইত্যাদি

অন্যান্য বৈশিষ্ট্য যা কোনও একক চিত্রের জন্য প্রযোজ্য তাও কমা দ্বারা পৃথক করা যেতে পারে। যদি কেবল 1 টি মান সরবরাহ করা হয় তবে গ্রেডিয়েন্ট সহ সমস্ত স্ট্যাক করা চিত্রগুলিতে এটি প্রয়োগ করা হবে। background-size: 40px;চিত্র এবং গ্রেডিয়েন্ট উভয়ই 40px উচ্চতা এবং প্রস্থকে সীমাবদ্ধ করবে। তবে ব্যবহারের background-size: 40px, cover;ফলে চিত্রটি 40px তৈরি হবে এবং গ্রেডিয়েন্ট উপাদানটি আবরণ করবে। শুধুমাত্র এক চিত্রে একটি সেটিং প্রয়োগ করতে, সেট অপরের জন্য ডিফল্ট: background-position: 50%, 0 0;বা ব্রাউজার যা এটিকে সমর্থন করে ব্যবহার initial:background-position: 50%, initial;

আপনি ব্যাকগ্রাউন্ড শর্টহ্যান্ডও ব্যবহার করতে পারেন, তবে এটি ফ্যালব্যাকের রঙ এবং চিত্র সরিয়ে দেয়।

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

একইটি ব্যাকগ্রাউন্ড-পজিশন, ব্যাকগ্রাউন্ড-রিপিট ইত্যাদির ক্ষেত্রে প্রযোজ্য etc.

Comments

আপনার উত্তরের জন্য ধন্যবাদ, background-positionকেবলমাত্র চিত্রটির জন্য এবং গ্রেডিয়েন্টটি নয় কীভাবে নিয়ন্ত্রণ করবেন তার কোনও ধারণা ?

— এডার্ডাইজাইন

এই জন্য ধন্যবাদ, দুর্দান্ত তথ্য। | @ অ্যাডার্ডাইন: ব্যাকগ্রাউন্ড শর্টহ্যান্ড ব্যবহার করুন। উপরের উদাহরণটি সংশোধন করে, এটি হবে: পটভূমি: ইউআরএল (IMAGE_URL) নো-রিপিট বাম শীর্ষ, [যথাযথ-গ্রেডিয়েন্ট];

— রাসেল উরেস্তি

@ অ্যাডার্ডাইনাইন: ব্যাকগ্রাউন্ড: ইউআরএল ("../ চিত্র / আইকন.পিএনজি") পুনরাবৃত্তি 15px কেন্দ্র, -মোজ-লিনিয়ার-গ্রেডিয়েন্ট (কেন্দ্র শীর্ষ, # এফএফএফএফএফ, #DDDDDD); / * বিজ্ঞপ্তি 15px কেন্দ্র, এটি যুক্ত করবে একটি 15px বাম প্যাডিং এবং উল্লম্বভাবে কেন্দ্রে বিন্যাস করুন আইকন.পিএনজি * /

— জুলিয়েন

ক্রোম অন্ততপক্ষে আপনি মান পৃথক করার জন্য কোমা ব্যবহার করে একাধিক চিত্রের পটভূমি অবস্থান নিয়ন্ত্রণ করতে পারেন .. এর মতো .. পটভূমি অবস্থান: 0 পিক্স 8 পিএক্স, 0 পিক্স 0 পিক্স ...

— অরল্যান্ডো

এটি সম্ভবত লক্ষণীয় যে আপনার যদি চিত্রটির অন্যান্য বৈশিষ্ট্যগুলি স্থিতিযুক্ত করার প্রয়োজন হয় তবে আপনি ব্যাকগ্রাউন্ড CSS বৈশিষ্ট্যগুলি পরে সিএস নিয়মে ব্যবহার করতে পারেন। যেমন: ব্যাকগ্রাউন্ড-রিপিট: নো-রিপিট; পটভূমি অবস্থান: কেন্দ্র; পটভূমি-আকার: 1300px 1303px;

— ফিলি হিলি

Answer 2

আপনি যদি নিজের ইমেজের জন্য পটভূমি অবস্থান সেট করতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

অথবা আপনি একটি কম মিশিন (বুটস্ট্র্যাপ স্টাইল) তৈরি করতে পারেন:

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Comments

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

— স্কা

@ এসকা - ঠিক তখনই অর্ডারটি বিপরীত করুন z জেড-ইনডেক্স এখানে প্রায় অন্যভাবে কাজ করে। স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 14915542/ … দেখুন ।

— ফ্রাঙ্ক কনিজেন

Answer 3

একটি জিনিস বুঝতে হবে যে প্রথম সংজ্ঞায়িত পটভূমি চিত্র স্ট্যাক মধ্যে শীর্ষতম হয়। শেষ সংজ্ঞায়িত চিত্রটি নীচে থাকবে। এর অর্থ, কোনও চিত্রের পিছনে একটি পটভূমি গ্রেডিয়েন্ট থাকতে আপনার প্রয়োজন হবে:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

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

Comments

উত্তরটি আরও ভাল হবে, যখন ডাব্লু 3 সি স্ট্যান্ডার্ড নোটেশনটি শেষে আসবে।

— ভোলকার ই।

এই কোডটি সঠিকভাবে সাথী হিসাবে কাজ করছে বলে মনে হচ্ছে না। আমরা কেবল স্ট্যাক ওভারফ্লো চিত্র দেখতে পারি, এর পটভূমির পিছনে / আগে নয় not

— বা এ।

আমি মনে করি -webkit-গ্রেডিয়েন্ট অবচিত করা যেতে পারে stackoverflow.com/questions/10683364/...

— alpalalpal

কোডটি কাজ নাও করতে পারে তবে এটি একটি খুব গুরুত্বপূর্ণ বিষয়। পটভূমি উপাদানগুলি কীভাবে কাজ করে আপনি তা পুনরায় অর্ডার করতে পারেন তবে সেগুলি স্তরযুক্ত হওয়ার কথা ভাবতে হবে। আপনি যদি চিত্রটির শীর্ষে গ্রেডিয়েন্ট চান তবে প্রথমে এটি রাখুন এবং আপনি সম্ভবত আমাদের কাছে আরজিবি চাইবেন যাতে আপনি চিত্রটি পিছনে দেখতে পারেন:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');

— সেরোসায়েস

Answer 4

আপনি কেবল টাইপ করতে পারেন:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Comments

এটি আমার জন্য একমাত্র সমাধান যা কাজ করেছিল (ফায়ারফক্স ভি 57)। এর linear-gradient()আগে আসতে হয়েছিল url(), এবং আংশিক স্বচ্ছতা ব্যবহার করে গ্রেডিয়েন্ট রঙগুলির জন্য ব্যবহার করতে হয়েছিল rgba()। অন্য যে কোনও কিছুই কেবল তালিকার প্রথম সংজ্ঞাটি ব্যবহার করেছিল (যেন দ্বিতীয়টি কীভাবে font-familyঘোষণা হিসাবে কাজ করে তার অনুরূপ ফ্যালব্যাক হয় )।

— ওয়াল্ডরিয়াস

@ ওয়াল্ডরিয়াস নোট যে ব্যবহারকারী রৈখিক গ্রেডিয়েন্টের উপরে হালকা স্বচ্ছ টেক্সচারটি প্রয়োগ করতে চায় তাই চিত্রটি প্রথমে আসা উচিত কারণ এটি গ্রেডিয়েন্টের উপরে রেন্ডার করা উচিত

— অ্যালেক্স গেরেরো

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

— ওয়াল্ডরিয়াস

Answer 5

আমি এটিকে কাজ করতে নিম্নোক্ত কোডটি সর্বদা ব্যবহার করি। কিছু নোট আছে:

1. যদি আপনি গ্রেডিয়েন্টের আগে চিত্রের URL রাখেন তবে প্রত্যাশা অনুযায়ী এই চিত্রটি গ্রেডিয়েন্টের উপরে প্রদর্শিত হবে।

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}

<div class="background-gradient"></div>

2. আপনি যদি চিত্রের URL এর আগে গ্রেডিয়েন্ট স্থাপন করেন তবে এই চিত্রটি গ্রেডিয়েন্টের নীচে প্রদর্শিত হবে ।

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}

<div class="background-gradient"></div>

এখানে বর্ণিত হিসাবে আমাদের একাধিক পটভূমি চিত্র রয়েছে ঠিক তেমনই এই কৌশলটি

Comments

গ্রেট! আমি এটিকে সাহসী করি -> আপনি যদি চিত্রের URL এর আগে গ্রেডিয়েন্ট স্থাপন করেন তবে এই চিত্রটি গ্রেডিয়েন্টের নীচে প্রদর্শিত হবে।

— aldyahsn

Answer 6

আমার সমাধান:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

Comments

এই সমাধানটি আমার ক্ষেত্রে চিত্রের শীর্ষে গ্রেডিয়েন্ট শো করতে কাজ করে, অন্যথায় এটি চিত্র দ্বারা আড়াল হবে।

— vizFlux

Answer 7

আমার একটি বাস্তবায়ন হয়েছিল যেখানে আমার এই কৌশলটি আরও একধাপ এগিয়ে নিয়ে যাওয়ার দরকার ছিল এবং আমার কাজের রূপরেখার ইচ্ছা ছিল। নীচের কোডটি একই কাজ করে তবে এসএএসএস, বোর্বান এবং একটি চিত্র স্প্রিট ব্যবহার করে।

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

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

Answer 8

আপনার যদি পটভূমি চিত্রগুলি ডাউনলোড করার সাথে অদ্ভুত ত্রুটি থাকে তবে ডাব্লু 3 সি লিংক পরীক্ষক ব্যবহার করুন: https://omotator.w3.org/checklink

এখানে আমি ব্যবহৃত আধুনিক মিক্সিনগুলি (ক্রেডিট: পিএসএ: গ্রেডিয়েন্ট জেনারেটর ব্যবহার করবেন না ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

Answer 9

এখানে একটি মিক্সিন রয়েছে যা আমি ব্যবহার করতে পছন্দ করতে পারে এমন সমস্ত কিছুই পরিচালনা করতে তৈরি করেছি:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

এটি এর মতো ব্যবহার করা যেতে পারে:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

আশা করি আপনারা এই উপকারটি পেয়েছেন।

প্রাথমিক সমাধান সন্ধানের জন্য @ জিডজিডোনিহায় জমা দিন।

Answer 10

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

আমি যা বলতে পারি তা থেকে, সীমানা-চিত্রটি একাধিক ব্যাকগ্রাউন্ডের চেয়ে বিস্তৃত সমর্থন বলে মনে হয়, তাই সম্ভবত এটি বিকল্প পদ্ধতির।

http://articles.sitepoint.com/article/css3-border-images

আপডেট: আরও কিছু গবেষণা। মনে পেত্রা Gregorova কিছু পরিশ্রমী এখানে আছে -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Answer 11

আপনি একাধিক পটভূমি ব্যবহার করতে পারেন: রৈখিক-গ্রেডিয়েন্ট (); কল করুন, কিন্তু এটি চেষ্টা করুন:

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

কেবলমাত্র নিশ্চিত হয়ে নিন যে আপনি আপনার প্রাক-রেন্ডার 32-বিট স্বচ্ছ পিএনজি চিত্র / টেক্সচারটিকে প্রথমে বেস 64 কে স্ট্রিংয়ে রূপান্তর করেছেন এবং এটি ব্যাকগ্রাউন্ড-চিত্র সিএসএস কলের মধ্যে ব্যবহার করুন (এই উদাহরণে INSERTIMAGEBLOBHERE এর জায়গায়)।

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

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

Answer 12

আপনি যদি 9 নম্বরে (এইচটিএমএল 5 এবং এইচটিএমএল 4.01 স্ট্রাইক) এক সাথে কাজ করে গ্রেডিয়েন্ট এবং পটভূমি চিত্র পেতে চান তবে আপনার সিএসএস শ্রেণিতে নিম্নলিখিত বৈশিষ্ট্য ঘোষণাটি যুক্ত করুন এবং এটি কৌশলটি করা উচিত:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

লক্ষ্য করুন যে আপনি filterঅ্যাট্রিবিউটটি ব্যবহার করেছেন এবং progid:[val]সেমিকোলনের সাথে অ্যাট্রিবিউট মানটি বন্ধ করার আগে কমা দ্বারা আলাদা হওয়ার দুটি উদাহরণ রয়েছে । এখানে বেহালার । এছাড়াও খেয়াল করুন যে আপনি যখন ফিডলটি দেখেন তখন গ্রেডিয়েন্টটি বৃত্তাকার কোণগুলি ছাড়িয়ে প্রসারিত হয়। গোলাকার কোণ ব্যবহার না করে অন্যটির জন্য আমার কাছে কোনও ঠিক নেই। এছাড়াও মনে রাখবেন যে এসআরসি [IMAGE_URL] বৈশিষ্ট্যে কোনও আপেক্ষিক পথ ব্যবহার করার সময়, পথটি নথির পৃষ্ঠার সাথে সম্পর্কিত এবং CSS ফাইল নয় ( উত্স দেখুন )।

এই নিবন্ধটি ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions- for-internet-explorer/ ) এর কারণেই এই সমাধানটি আমাকে নিয়ে যায়। এটি IE- নির্দিষ্ট CSS3 এর জন্য বেশ সহায়ক।

Answer 13

আমি ব্যাকগ্রাউন্ড চিত্র, পটভূমির গ্রেডিয়েন্ট সংমিশ্রণ সহ স্প্যান বোতামটি তৈরি করতে চেয়েছিলাম।

http://enjoycss.com/ আমার কাজের কাজটি করতে সহায়তা করেছে। কেবলমাত্র আমাকে কিছু স্বয়ংক্রিয় উত্পন্ন অতিরিক্ত সিএসএস অপসারণ করতে হবে। তবে এটি আপনার স্ক্র্যাচের কাজটি তৈরি করতে সত্যিই দুর্দান্ত সাইট।

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

Answer 14

আমি সেইভাবে সমস্যার সমাধান করি। আমি গ্রেডিয়েন্টকে এইচটিএমএল এবং বডির পটভূমির চিত্রকে সংজ্ঞায়িত করি

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

Answer 15

আমার প্রতিক্রিয়াশীল ডিজাইনের জন্য, বক্সের ডানদিকে আমার ড্রপ-বক্স ডাউন-তীর (উল্লম্ব এ্যাকর্ডিয়ন), অবস্থান হিসাবে হিসাবে শতাংশ গ্রহণ করেছে। প্রথমদিকে ডাউন-তীরটি ছিল "অবস্থান: নিখুঁত; ডান: 13px;"। %৯% পজিশনিংয়ের সাথে এটি মন্ত্রীর মতো কাজ করেছে:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

পিএস দুঃখিত, ফিল্টারগুলি কীভাবে পরিচালনা করতে হয় তা জানেন না।

Answer 16

একটি নিশ্চিত পদ্ধতি উপায় হিসাবে, আপনি কেবল আপনার cssব্যবহারে 500x5 পিক্সেল বলে একটি পটভূমি চিত্র তৈরি করতে পারেন:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

যেখানে xxxxxxচূড়ান্ত গ্রেডিয়েন্ট রঙের সাথে মেলে এমন রঙের সাথে মিল রয়েছে।

আপনি এটি পর্দার নীচে স্থির করতে এবং এটি প্রাথমিক গ্রেডিয়েন্ট রঙের সাথে মিলিয়ে দিতে পারেন।

Comments

-1 কারণ: একটি জিনিসের জন্য, "ব্যাকগ্রাউন্ড-ইমজি" কোনও বৈধ CSS নিয়ম নয়। অন্যের জন্য, এটি আসলে প্রশ্নের উত্তর দেয় না।

— ক্রিস ব্রাউন