সিএসএস 3 গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডটি শরীরে সেট করা প্রসারিত হয় না বরং পরিবর্তিত হয়?

429

ঠিক আছে, <body>মোট 300px উচ্চতার ভিতরে থাকা সামগ্রীটি বলুন ।

আমি যদি আমার <body>ব্যবহারের ব্যাকগ্রাউন্ড সেট করি -webkit-gradientবা-moz-linear-gradient

তারপরে আমি আমার উইন্ডো সর্বাধিক বাড়িয়েছি (বা কেবল এটি 300px এর চেয়ে লম্বা করব) গ্রেডিয়েন্টটি ঠিক 300px লম্বা হবে (সামগ্রীর উচ্চতা) এবং বাকি উইন্ডোটি পূরণ করার জন্য কেবল পুনরাবৃত্তি করবে।

আমি ধরে নিচ্ছি যে এটি কোনও বাগ নয় কারণ এটি ওয়েবকিট এবং জেকো উভয় ক্ষেত্রেই সমান।

কিন্তু পুনরাবৃত্তির পরিবর্তে উইন্ডোটি পূর্ণ করার জন্য গ্রেডিয়েন্ট প্রসারিত করার কোনও উপায় আছে?

css gradient

— জেডি আইজ্যাকস
সূত্র

717

নিম্নলিখিত সিএসএস প্রয়োগ করুন:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

সম্পাদনা করুন:margin: 0; প্রতি মন্তব্যগুলিতে বডি ডিক্লোরেশনে যুক্ত হয়েছে ( মার্টিন )।

সম্পাদনা করুন:background-attachment: fixed; প্রতি মন্তব্যে বৌয়ের ঘোষণায় যুক্ত হয়েছে ( জোহ সবুজ )।

— ব্রায়ান ডাউনিং
সূত্র

4

আমিও জানতে পারলেন যে আমি যোগ করা প্রয়োজন margin:0;উপর bodyবা অন্য আমি আমার পৃষ্ঠার নীচের অংশে অবস্থিত একটা ফাঁক আছে।

— মার্টিন

8

ক্রোম এবং সাফারিতে, দেহের দৈর্ঘ্য {উচ্চতা: 100% the এর ফলাফল পৃষ্ঠার (তবে গ্রেডিয়েন্ট নয়) ভিউপোর্টের বাইরে প্রসারিত করে।

— thSoft

13

আমাকে একটি ব্যাকগ্রাউন্ড-সংযুক্তি যুক্ত করতে হয়েছিল: স্থির; শরীরে নীচের ফাঁক থেকে মুক্তি পেতে (ওয়েবকিট)।

— j7nn7k

4

শরীরে একটি পটভূমি সেট করে এবং তারপরে এইচটিএমএল ট্যাগের উচ্চতা 100% করে দেওয়া ইন্টারনেট এক্সপ্লোরারটিতে অদ্ভুত জিনিসগুলি করে। এখানে একটি উদাহরণ (png)।

— জাস্টিন ফোর্স

21

নিশ্চিত করুন যে background-repeatএবং background-attachmentআসা পর আপনার backgroundনিয়ম। অন্যথায়, পটভূমি এখনও পুনরাবৃত্তি হতে পারে।

— ক্যালেন

159

, একটি পূর্ববর্তী উত্তর সংক্রান্ত সেটিং htmlএবং bodyকরতে height: 100%যদি বিষয়বস্তু চাহিদা স্ক্রল কাজ বলে মনে হচ্ছে না। যোগ করা হচ্ছে fixedপটভূমি ফিক্স যে বলে মনে হয় - কোনোneed for height: 100%;

উদাহরণ:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

স্নিপেট প্রসারিত করুন

— জোশুয়া রুড
সূত্র

5

"উচ্চতা: 100%" এর স্ক্রোলবারের পার্শ্ব প্রতিক্রিয়া ছাড়াই আমি পরীক্ষিত প্রতিটি ব্রাউজারে (ক্রোম [ম্যাক], সাফারি [ম্যাক], ফায়ারফক্স [ম্যাক / উইন 7], আই 9 [উইন 7] এবং অপেরা [ম্যাক]) কাজ করেছিলাম সমাধান। ধন্যবাদ!

— পাইপওয়ার্কস

7

সাস / কম্পাস ব্যবহার করা লোকদের জন্য একটি নোট। আপনি সরাসরি মিশ্রিনে "স্থির" সেট করতে পারবেন না তাই স্থির যোগ করার জন্য আপনি সম্পত্তি যুক্ত করুনbackground-attachment: fixed

— কাইল ম্যাথিউজ

2

আপনি যদি পটভূমিটি উইন্ডোটি পূরণ করতে চান, বা সামগ্রীটি (যেটি বৃহত্তর হয়) তবে min-height:100%(সামঞ্জস্যপূর্ণ ব্রাউজারগুলিতে) ব্যবহার করুন

— সিজেকে

আমি কম্পাস ব্যবহার করে নিম্নলিখিত কোডটি কার্যকর করতে সক্ষম হয়েছি: @ ব্যাকগ্রাউন্ড অন্তর্ভুক্ত করুন (রৈখিক-গ্রেডিয়েন্ট (শীর্ষ, লাল 0%, নীল 100% স্থির);

— mcranston18

আমি কীভাবে তৃতীয় রঙ যুক্ত করব?

— sbben

17

আমি জানি আমি পার্টিতে দেরি করেছি, তবে এখানে আরও শক্ত উত্তর দেওয়া হচ্ছে।

আপনাকে কেবল যা করা দরকার min-height: 100%;তার চেয়ে বেশি ব্যবহার করা উচিত height: 100%;এবং আপনার গ্রেডিয়েন্ট পটভূমিটি ভিউপোর্টের পুরো উচ্চতাটি পুনরাবৃত্তি না করেই প্রসারিত করবে, এমনকি যদি সামগ্রীটি স্ক্রোলযোগ্য হয়।

এটার মত:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

— রিকার্ডো জিয়া
সূত্র

যদি আপনি এইচটিএমএল উচ্চতা 100% এ সেট করতে না চান, উদাহরণস্বরূপ যদি আপনার স্টিকি ফুটার প্রয়োজন হয়

— apieceofbart

15

এই সমস্যাটি সমাধান করার জন্য আমি যা করেছি তা এখানে ... এটি সামগ্রীর সম্পূর্ণ দৈর্ঘ্যের গ্রেডিয়েন্টটি দেখায়, তারপরে কেবল ব্যাকগ্রাউন্ড রঙে ফ্লোব্যাক হয় (সাধারণত গ্রেডিয়েন্টের শেষ রঙ)।

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

স্নিপেট প্রসারিত করুন

আমি এটি ফায়ারফক্স 3.6, সাফারি 4 এবং ক্রোমে পরীক্ষা করেছি, আমি কোনও ব্রাউজারের জন্য শরীরে ব্যাকগ্রাউন্ড-রঙ রাখি যা কোনও কারণে HTML ট্যাগ স্টাইলিং সমর্থন করে না।

— জন সানফোর্ড
সূত্র

13

সেটিং html { height: 100%}IE- এর সঙ্গে ক্ষিতি প্রকাশ করতে পারেন। এখানে একটি উদাহরণ (png)। কিন্তু আপনি কি দুর্দান্ত কাজ জানেন? কেবল <html>ট্যাগটিতে আপনার পটভূমি সেট করুন ।

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

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

— জাস্টিন ফোর্স
সূত্র

1

@ লিন্ডা এটি খুব সহায়ক প্রতিক্রিয়া নয়। আপনি যদি এমন কোনও মামলা প্রদান করেন যা এটি কাজ করে না?

— জাস্টিন ফোর্স

অস্পষ্ট হওয়ার জন্য দুঃখিত। আমি নিশ্চিত না যে এটি কেন কাজ করে না। আপনি এতে গ্রেডিয়েন্ট যুক্ত করতে পারেন htmlতবে এটি আমার ক্ষেত্রে পৃষ্ঠায় কিছুটা থামে। যোগ করা background-attachment:fixedসমস্যার সমাধান করে। আমি একাধিক সাইটে এটি ঘটতে দেখেছি তবে কারণ খুঁজে পেতে সক্ষম হইনি।

— L84

এই সমাধানের বিষয়টি হ'ল এটি ব্রাউজারগুলি জুড়ে কাজ করেছে (২০১২ সালে, উপায় দ্বারা)। আপনি এখনও কোন ব্রাউজারের কথা বলছেন তা এখনও আপনি চিহ্নিত করতে পারেন না। যদি আপনার এখনও সমস্যা হয় তবে যুক্ত করার চেষ্টা করুন html, body { height: 100%; }।

— জাস্টিন ফোর্স

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

— L84

এখনও কোন পুনরাবৃত্তি এবং স্থির সঙ্গে বোকা করতে হবে।

— মঙ্গলআন্ডব্যাক

12

এই পৃষ্ঠায় প্রচুর আংশিক তথ্য রয়েছে, তবে সম্পূর্ণ নয়। আমি যা করি তা এখানে:

এখানে একটি গ্রেডিয়েন্ট তৈরি করুন: http://www.colorzilla.com/gradient-editor/
BODY এর পরিবর্তে HTML এ গ্রেডিয়েন্ট সেট করুন।
HTML এ ব্যাকগ্রাউন্ডটি "ব্যাকগ্রাউন্ড-সংযুক্তি: স্থির;" সহ ঠিক করুন
BODY এ উপরের এবং নীচের মার্জিনগুলি বন্ধ করুন
(alচ্ছিক) আমি সাধারণত এমন একটি তৈরি <DIV id='container'>করি যা আমি আমার সমস্ত সামগ্রী রেখেছি

এখানে একটি উদাহরণ:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

এটি আইই, ক্রোম এবং ফায়ারফক্সের সাথে বিভিন্ন আকারের এবং স্ক্রোলিং প্রয়োজনীয়তার পৃষ্ঠাতে পরীক্ষা করা হয়েছে।

— রিক স্মিথ
সূত্র

1

গ্রেট! আমি রঙিন জিলা ব্যবহার করছিলাম এবং মূল উত্তরটি আমার পক্ষে কার্যকর হয়নি। এই এক করেছে। ধন্যবাদ! :)

— ফিলি

কেন আপনার পছন্দটি এইচটিএমএল এ করা, বডি এ নয়?

— শাশাইকিভিচ

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

— রিক স্মিথ

@ রিকস্মিথ নোপ, আমি স্টাইল করা এইচটিএমএল। তবে, আমি এখনই পরীক্ষা করতে নিয়মগুলি শরীরে প্রয়োগ করার জন্য স্থানান্তরিত করেছি এবং এতে কোনও পার্থক্য হয়নি। হতে পারে এটি একটি পুরানো ব্রাউজারের জিনিস ছিল ...

— শশাইকিভিচ

4

ডার্টি; হতে পারে আপনি কেবল একটি ন্যূনতম উচ্চতা যুক্ত করতে পারেন: 100%; এইচটিএমএল, এবং বডি ট্যাগগুলিতে? এটি বা কমপক্ষে একটি ডিফল্ট ব্যাকগ্রাউন্ড রঙ সেট করুন যা শেষ গ্রেডিয়েন্ট রঙও।

— subv3rsion
সূত্র

1

গ্রেডিয়েন্ট রঙ হিসাবে ডিফল্ট ব্যাকগ্রাউন্ড সেট গ্রেডিয়েন্টটি বন্ধ হয়ে গেলে দুর্দান্ত সমাধান হবে তবে গ্রেডিয়েন্টটি অসমর্থিত থাকলে ডিফল্ট পটভূমিটি কেবল তখনই দেখা যায়।

— জেডি আইজ্যাকস 21

2

এখানে কাজ করতে উত্তর পেতে আমার সমস্যা হয়েছিল।
আমি শরীরে একটি পূর্ণ আকারের ডিভ ঠিক করতে, এটি একটি নেতিবাচক জেড-ইনডেক্স দিতে এবং এর সাথে গ্রেডিয়েন্ট সংযুক্ত করার জন্য আরও ভাল কাজ করে দেখেছি।

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

এখানে একটি সম্পূর্ণ নমুনা https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

— morefromalan
সূত্র

0

আমি এই সিএসএস কোডটি ব্যবহার করেছি এবং এটি আমার পক্ষে কাজ করেছে:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

সম্পর্কিত তথ্য হ'ল আপনি নিজের নিজস্ব গ্রেডিয়েন্টগুলি http://www.colorzilla.com/gradient-editor/ এ তৈরি করতে পারেন

/ স্টেন

— Netsi1964
সূত্র

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

— জো
সূত্র

1

আপনার সমাধানের মূল দিকগুলি সম্পর্কে কিছু ব্যাখ্যা যুক্ত করুন।

— রচ্চা

-1

এই আমি কি করেছি:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

আমি দেহটি ভাসানোর আগে উপরে একটি ফাঁক ছিল এবং এটি এইচটিএমএল এর পটভূমি রঙ দেখাচ্ছে। আমি যদি এইচটিএমএল এর বিজিকালার সরিয়ে ফেলি, যখন আমি নীচে স্ক্রোল করি, গ্রেডিয়েন্টটি কেটে যায়। সুতরাং আমি শরীরটি ভাসিয়ে দিয়েছি এবং এর অবস্থানটি আপেক্ষিকের সাথে এবং প্রস্থকে 100% এ সেট করেছি। এটি সাফারি, ক্রোম, ফায়ারফক্স, অপেরা, ইন্টারনেট এক্সপ্লেতে কাজ করেছে .. ওহ অপেক্ষা করুন। : P: P

তোমরা কি ভাবো?

— grizzy
সূত্র

-4

100% এর পরিবর্তে আমি কিছু পিক্সেল যুক্ত করেছি এখন এটি পেয়েছে এবং এটি ফাঁক ছাড়াই পুরো পৃষ্ঠার জন্য কাজ করে:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

— Sander
সূত্র

3

> উচ্চতা 1420 পিক্সেল সহ পৃষ্ঠাগুলি সম্পর্কে কী?

— ভেরিটাস