সিএসএস: একটি পটভূমি রঙ সেট করুন যা উইন্ডোর প্রস্থের 50% is

Question

"দুটি ভাগে বিভক্ত" একটি পৃষ্ঠায় একটি পটভূমি অর্জনের চেষ্টা করা; বিপরীত দিক থেকে দুটি রং (আপাতদৃষ্টিতে একটি ডিফল্ট সেটিং দ্বারা সম্পন্ন background-colorউপর body, ট্যাগ তারপর একটি সম্মুখের অন্য প্রয়োগের divযে উইন্ডো সমগ্র প্রস্থ প্রসারিত)।

আমি একটি সমাধান নিয়ে এসেছি তবে দুর্ভাগ্যক্রমে background-sizeসম্পত্তি আই 7/8 এ কাজ করে না যা এই প্রকল্পের জন্য আবশ্যক -

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

যেহেতু এটি কেবল কঠিন রঙগুলির সম্পর্কেই রয়েছে কেবলমাত্র নিয়মিত background-colorসম্পত্তি ব্যবহারের কোনও উপায় আছে ?

Answer 1

পুরানো ব্রাউজার সমর্থন

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

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

উদাহরণ: http://jsfiddle.net/PLfLW/1704/

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

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

---

আধুনিক ব্রাউজারগুলি

নতুন ব্রাউজারগুলি যদি আপনার একমাত্র উদ্বেগ, তবে আপনি ব্যবহার করতে পারেন এমন আরও কয়েকটি পদ্ধতি রয়েছে:

লিনিয়ার গ্রেডিয়েন্ট:

এটি অবশ্যই সহজতম সমাধান। আপনি বিভিন্ন প্রভাবের জন্য শরীরের পটভূমির সম্পত্তিতে রৈখিক-গ্রেডিয়েন্ট ব্যবহার করতে পারেন।

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

এটি প্রতিটি রঙের জন্য 50% এ কঠোর কাট অফ তৈরি করে, সুতরাং নামটি বোঝার সাথে সাথে "গ্রেডিয়েন্ট" নেই। স্টাইলের "50%" টুকরো দিয়ে পরীক্ষা করে দেখুন আপনি যে বিভিন্ন প্রভাব অর্জন করতে পারেন তা দেখতে।

উদাহরণ: http://jsfiddle.net/v14m59pq/2/

ব্যাকগ্রাউন্ড-আকারের একাধিক পটভূমি:

আপনি htmlউপাদানটিতে একটি পটভূমি রঙ প্রয়োগ করতে পারেন , এবং তারপরে উপাদানটিতে একটি পটভূমি চিত্র প্রয়োগ করতে bodyপারেন background-sizeএবং পৃষ্ঠাটি প্রস্থের 50% এ সেট করতে সম্পত্তিটি ব্যবহার করতে পারেন । এটি একটি অনুরূপ প্রভাবের ফলস্বরূপ, যদিও আপনি যদি কোনও ছবি বা দুটি ব্যবহার করে যাচ্ছেন তবে সত্যই কেবল গ্রেডিয়েন্টগুলির উপরে ব্যবহৃত হবে।

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

উদাহরণ: http://jsfiddle.net/6vhshyxg/2/

---

অতিরিক্ত উল্লেখ্য: লক্ষ করুন যে, উভয় htmlএবং bodyউপাদান হিসাবে সেট করা আছে height: 100%আধুনিক উদাহরণ হবে। এটি নিশ্চিত করার জন্য আপনার লিখিত সামগ্রীটি পৃষ্ঠার চেয়ে ছোট হলেও, ব্যাকগ্রাউন্ডটি ব্যবহারকারীর ভিউপোর্টের কমপক্ষে উচ্চতা হবে। সুস্পষ্ট উচ্চতা ব্যতীত, পটভূমি প্রভাব কেবল আপনার পৃষ্ঠাগুলির নিচে চলে যাবে। এটি সাধারণভাবেও একটি ভাল অনুশীলন।

Comments

ধন্যবাদ, এটি আমাকে একটি টেবিলে এই প্রভাবটি অর্জন করতে সহায়তা করেছে: jsfiddle.net/c9kp2pde

linear-gradient: হার্ড কর্তক এছাড়াও পিক্সেল জন্য কাজ করেbackground: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);

— জ্যাকব ভ্যান Lingen

এটি 50% 50% এর সাথে কাজ করে, তবে আমি 25% 75% দিয়ে প্রতিস্থাপন করলে তা কার্যকর হয় না

— datdinhquoc

@datdinhquoc চেষ্টা করুন background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);।

— justisb

Answer 2

"দুই ভাগে বিভক্ত" ব্যাকগ্রাউন্ড অর্জনের সহজ সমাধান:

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

আপনি দিক হিসাবে ডিগ্রিও ব্যবহার করতে পারেন

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Comments

এটি দুর্দান্ত, তবে এটি একটি গ্রেডিয়েন্ট। একটি কঠিন পার্থক্য করা সম্ভব?

— জন গিয়োটা

Answer 3

দ্বিতীয় রঙকে 0% এ রেখে আপনি লিনিয়ার গ্রেডিয়েন্টের পরিবর্তে একটি আলাদা পার্থক্য তৈরি করতে পারেন

এই ক্ষেত্রে,

গ্রেডিয়েন্ট - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

হার্ড পার্থক্য - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Answer 4

সুতরাং, এটি একটি ভয়ঙ্কর পুরানো প্রশ্ন যা ইতিমধ্যে একটি স্বীকৃত উত্তর রয়েছে, তবে আমি বিশ্বাস করি যে এই উত্তরটি যদি চার বছর আগে পোস্ট করা হত তবে এই উত্তরটি বেছে নেওয়া হত।

আমি এটি সিএসএসের সাথে এবং কোনও অতিরিক্ত ডোম এলিমেন্টের সাথে নিখুঁতভাবে সমাধান করেছি! এর অর্থ হ'ল দুটি রঙ বিশুদ্ধরূপে, কেবলমাত্র একটি এলিমেন্টের ব্যাকগ্রাউন্ড রঙ, দুটির ব্যাকগ্রাউন্ড রঙ নয়।

আমি একটি গ্রেডিয়েন্ট ব্যবহার করেছি এবং, কারণ আমি রঙটি এত ঘনিষ্ঠভাবে একসাথে থামিয়েছি সেট করে দেখে মনে হচ্ছে যেন রঙগুলি আলাদা এবং সেগুলি মিশ্রিত হয় না।

দেশীয় বাক্য গঠনতে এখানে গ্রেডিয়েন্ট রয়েছে:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

রঙ #74ABDDশুরু হয় 0%এবং এখনও #74ABDDরয়েছে 49.9%।

তারপরে, আমি 0.2%উপাদানগুলির উচ্চতার মধ্যে গ্রেডিয়েন্টটিকে আমার পরবর্তী রঙে স্থানান্তর করতে বাধ্য করি , এটি তৈরি করে যা দুটি রঙের মধ্যে খুব শক্ত রেখা বলে মনে হয়।

ফলাফল এখানে:

এবং এখানে আমার জেএসফিডাল!

আনন্দ কর!

Comments

একটি এমনকি এই উপর পিক্সেল সঙ্গে যেতে পারেন। background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);

— ফিলিপ

Answer 5

এটি খাঁটি সিএসএস নিয়ে কাজ করা উচিত।

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

শুধুমাত্র ক্রোমে পরীক্ষিত।

Answer 6

অতীতে প্রজেক্টে আইই 8 + সমর্থন করতে হয়েছিল এবং আমি ডেটা-ইউআরএল ফর্ম্যাটটিতে এনকোড করা একটি চিত্র ব্যবহার করে এটি অর্জন করেছি।

চিত্রটি ছিল 2800x1px, চিত্রটির অর্ধেক সাদা এবং অর্ধেক স্বচ্ছ। বেশ ভাল কাজ করেছেন।

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

আপনি এটি এখানে কাজ করে দেখতে পারেন জেএসফিডাল । আশা করি এটি কাউকে সহায়তা করতে পারে;)

Answer 7

আমি ব্যবহার করেছি :afterএবং এটি সমস্ত বড় ব্রাউজারে কাজ করছে। লিঙ্কটি পরীক্ষা করুন। জেড-ইনডেক্সের জন্য যথাযথ যত্ন নেওয়া দরকার যেমনটি পরের স্থানে রয়েছে।

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

মজাদার লিঙ্ক

Answer 8

আপনি এটি :afterঅর্জনের জন্য সিউডো-সিলেক্টরটি ব্যবহার করতে পারেন , যদিও আমি সেই নির্বাচকের পশ্চাদপদ সামঞ্জস্যের বিষয়ে নিশ্চিত নই।

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

আমি এটি পৃষ্ঠার পটভূমিতে দুটি পৃথক গ্রেডিয়েন্ট থাকতে ব্যবহার করেছি।

Comments

এই কৌশলটি সমস্ত ব্রাউজারগুলিতে সমর্থিত, দুর্দান্ত সমাধান! আপনি যদি স্থির প্রভাবটি না চান তবে আপনি কোনও আত্মীয় পিতামাতার সাথেও একটি পরম অবস্থান ব্যবহার করতে পারেন।

— অ্যাডাম টি। স্মিথ

Answer 9

আপনার ইমেজ বিজি ব্যবহার করুন

উল্লম্ব বিভাজন

background-size: 50% 100%

অনুভূমিক বিভাজন

background-size: 100% 50%

উদাহরণ

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Comments

আমি কীভাবে এই পটভূমিটি কেন্দ্রে স্থাপন করতে পারি

— বৈভব অহলপারা

চেষ্টা করুন: background-position: center center

— জান রানোস্তাজ

Answer 10

আপনার ডিভের মধ্যে একটি একক লাইন ইনপুট করার জন্য আপনার সমস্যাটি কার্যকর করার একটি উপায়:

background-image: linear-gradient(90deg, black 50%, blue 50%);

এখানে একটি প্রদর্শনের কোড এবং আরও বিকল্প (অনুভূমিক, তির্যক ইত্যাদি) রয়েছে, এটি সরাসরি দেখতে আপনি "রান কোড স্নিপেট" এ ক্লিক করতে পারেন।

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

Answer 11

সর্বাধিক বুলেট-প্রুফ এবং শব্দার্থগতভাবে সঠিক বিকল্পটি স্থির-অবস্থানযুক্ত সিউডো-উপাদান ( ::afterবা ::before) ব্যবহার করা হবে use এই কৌশলটি ব্যবহার z-indexকরে ধারকটির ভিতরে থাকা উপাদানগুলিতে সেট করতে ভুলবেন না । এছাড়াও মনে রাখবেন, content:""সিউডো-এলিমেন্টের জন্য সেই নিয়ম প্রয়োজন, অন্যথায় এটি রেন্ডার হবে না।

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

সরাসরি উদাহরণ: https://jsfiddle.net/xraymutes/pwz7t6we/16/

Answer 12

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
}

<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>

Answer 13

এটি এমন একটি উদাহরণ যা বেশিরভাগ ব্রাউজারে কাজ করবে।
মূলত আপনি দুটি ব্যাকগ্রাউন্ড রঙ ব্যবহার করেন, প্রথমটি 0% থেকে শুরু হয়ে 50% এবং দ্বিতীয়টি 51% থেকে শুরু হয়ে 100% এ শেষ হয়

আমি অনুভূমিক অবস্থান ব্যবহার করছি:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

বিভিন্ন সামঞ্জস্যের জন্য আপনি http://www.colorzilla.com/gradient-editor/ ব্যবহার করতে পারেন

Answer 14

আপনি যদি linear-gradient50% উচ্চতার সাথে ব্যবহার করতে চান :

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;