আমি কি কেবল প্যাডিংয়ের জন্য পটভূমির রঙ যুক্ত করতে পারি?

Question

আমার কাছে সীমানা এবং প্যাডিং এবং সেই বাক্সটির জন্য পটভূমির রঙ সহ একটি শিরোনাম বাক্স রয়েছে, আমি কেবল সীমানার পরে প্যাডেড অঞ্চলের জন্য এবং তারপরে বাকি প্রস্থের জন্য একই পটভূমির রঙ পরিবর্তন করতে পারি (প্রদত্ত কোডে ধূসর) ?

আমি কোডের এক চিমটি যেখানে প্যাডযুক্ত পটভূমির রঙ চাই:

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}

Comments

আমি মনে করি না, তবে আমি ভুল প্রমাণ করতে পছন্দ করব । (আমি ভাবছি আপনাকে কোনও উপাদান বাসা বাঁধতে হবে))

— ডেভিড বলেছেন মনিকা

না, আপনি ডেভিডকে সঠিক বলেছেন।

— এলি গ্যাসসেট 31'13

@ ডেভিড থমাস আমিও একই কামনা করি! আসুন দেখে নেওয়া যাক ..

— পবন নাদিগ

এলিগ্যাস্রেট উম্মম .. তাহলে এর ভিতরে বিভিন্ন রঙের বাক্স রাখতে আমি কী করতে পারি?

— পবন নাদিগ

আমার উত্তরটি পরীক্ষা করে দেখুন এটি করা যায়।

— মুহাম্মদ উমার

Answer 1

খাঁটি সিএসএস সহ অন্য একটি বিকল্প হতে পারে:

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

এখানে ডেমো

Comments

আপনার সিউডো-ক্লাসের উপাদানটি ডান দিকের মূল বাক্সের বাইরে চলে গেছে কারণwidth: 100%;

— সাইমন

এখন ডানদিকে ব্যবধানটি অনেক বড়, প্রস্থের 95% নির্ধারণ করা খুব নির্ভরযোগ্য নয়, বিশেষত যদি প্যাডিং পরিবর্তন হয়। ;)

— সাইমন

@ সিমন আপনি দয়া করে ব্যাখ্যা করতে পারেন আপনি কোডটি কেন রেখেছেন position:relative;আমি দেখতে পাচ্ছি যে এটিটি স্থাপন না করা থাকলে তা পর্দায় উপস্থিত হয় না! .. তবে কীভাবে এটি কাজ করে?

— পবন নাদিগ

@ পাভান নাদিগ অবস্থান আপেক্ষিক তাই জেড-ইনডেক্সের মান যুক্ত হয়ে কার্যকর হতে পারে। জেড-ইনডেক্স কেবল অবস্থিত উপাদানগুলিতে কাজ করে।

— গোটোহেলস

আমি মনে করি এটি এখানে

— সাইমন

Answer 2

আমি সবাইকে দুঃখিত যে এটিই হ'ল সমাধান হ'ল সত্য যেখানে আপনাকে প্যাডিং সেট করতে হবে না।

http://jsfiddle.net/techsin/TyXRY/1/

আমি কী করেছি...

• এক প্রারম্ভ এবং শেষ রঙ উভয় সহ পটভূমিতে দুটি গ্রেডিয়েন্ট প্রয়োগ করা হয়েছে। পরিবর্তে শক্ত রঙ ব্যবহার করুন। আপনার এক পটভূমির জন্য দুটি শক্ত রঙ না থাকতে পারে কারণ হ'ল।
• তারপরে প্রত্যেককে আলাদা আলাদা ব্যাকগ্রাউন্ড-ক্লিপ সম্পত্তি প্রয়োগ করা হয়েছে।
• এইভাবে একটি রঙ সামগ্রী সামগ্রী এবং অন্য সীমানায় প্রসারিত করে প্যাডিং প্রকাশ করে।

চতুর যদি আমি নিজের কাছে তাই বলে।

div {
    padding: 35px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Comments

খুব চালাক. আমি সামান্য কিছুটা পরিষ্কার করেছি: jsfiddle.net/ilancopelyn/n1ax4qvt

— Ilan

এখনই এটি jsfiddle.net/TyXRY/123 (123) এ রয়েছে তবে তারা কী করছে বা কারা করছে তা আমার কাছে পরিষ্কার নয়।

— মুহাম্মদ উমার

আমি এই পছন্দ। মাঝখানে খুব খারাপ (যেমন কন্টেন্ট-বাক্স) স্বচ্ছ হতে পারে না এবং অন্তর্নিহিত (উদাহরণস্বরূপ শরীর) রঙের মাধ্যমে একটি গর্ত ঘুষি করতে পারে। আমি যখন এটি চেষ্টা করেছি তখন আমি Chrome এ কেবলমাত্র বাইরের গ্রেডিয়েন্টটি দেখি।

— এমএসসি 20'15

জেনিয়াস! এর সাথে কোনও সংক্রমণ সংযুক্ত করার কোনও উপায় আছে কি? আমি চেষ্টা করেছি কিন্তু সফল হই নি।

— গারাভানী

transition: all 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

— বেনি কে

Answer 3

background-clipএবং box-shadowবৈশিষ্ট্য ব্যবহার করুন ।

1) সেট background-clip: content-box- এটি কেবলমাত্র সামগ্রীতে পটভূমি সীমাবদ্ধ করে (প্যাডিং এবং সীমানা উভয়ই coveringেকে দেওয়ার পরিবর্তে)

2) box-shadowপ্যাডিংয়ের সমান মান হিসাবে স্প্রেড ব্যাসার্ধ সেট সহ একটি অভ্যন্তর যুক্ত করুন ।

সুতরাং বলুন প্যাডিংটি 10px - সেট box-shadow: inset 0 0 0 10px lightGreen- যা কেবল প্যাডিং অঞ্চল হালকা সবুজ করে তুলবে।

কোডপেন ডেমো

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

এই কৌশলটি কভার করার জন্য একটি টিউটোরিয়ালের জন্য এই দুর্দান্ত সিএসএস-ট্রিকস পোস্টটি দেখুন

Comments

কী 0 0 0মানে?

— নাকিলন

@ নাকিলনের box-shadowচারটি সম্পত্তি রয়েছে। 0 0 0সেট h-shadow v-shadowএবং blur0, অনুভূমিক ছায়া, উল্লম্ব ছায়া, এবং দাগ দূরত্ব হিসাবে এই বাস্তবায়নের অপ্রয়োজনীয় করছে। এটি কেবলমাত্র একটি শক্ত ছায়া যা অভ্যন্তরীণ দিকে যায় ( inset) 10px।

— trlkly

সহজ এখনও কার্যকর!

— টিম্বেজ

Answer 4

আপনি সেই প্রভাবের জন্য পটভূমি-গ্রেডিয়েন্টগুলি ব্যবহার করতে পারেন। আপনার উদাহরণের জন্য কেবল নিম্নলিখিত লাইনগুলি যুক্ত করুন (এটি কেবলমাত্র কোডের কারণ আপনাকে ভেন্ডর-উপসর্গগুলি ব্যবহার করতে হবে):

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

অপ্রয়োজনীয় মার্কআপের দরকার নেই।

আপনি যদি কেবল একটি দ্বৈত সীমানা রাখতে চান তবে আপনি সীমানা এবং প্যাডিংয়ের পরিবর্তে রূপরেখা এবং সীমানা ব্যবহার করতে পারেন।

আপনি পছন্দসই প্রভাব অর্জনের জন্য সিউডো-উপাদানগুলিও ব্যবহার করতে পারেন, আমি এর বিরুদ্ধে পরামর্শ দেব। সিউডো-উপাদানগুলি হ'ল একটি শক্তিশালী সরঞ্জাম সিএসএস সরবরাহ করে, যদি আপনি এগুলি স্টাফগুলিতে "নষ্ট" করেন তবে আপনি সম্ভবত সেগুলি অন্য কোথাও মিস করবেন।

অন্য কোনও উপায় না থাকলে আমি কেবল ছদ্ম-উপাদান ব্যবহার করি। তারা খারাপ হওয়ার কারণে নয়, একেবারে বিপরীত, কারণ আমি আমার জোকারকে নষ্ট করতে চাই না।

Comments

আপনি যদি আই 99 কে উপেক্ষা করতে পারেন- আপনি গ্রেডিয়েন্টগুলির সাহায্যে এটি করতে পারেন তবে সিউডো-ক্লাসগুলি অন্তত IE8 এ সমর্থিত।

— সাইমন

ঐটা সত্য. তবে এর মধ্যে অনেকগুলি ক্ষেত্রে যদি css3pie.com ব্যবহার করা উপযুক্ত হতে পারে

— ডেভ

অপচয় কী? সিউডো উপাদানগুলি কি সীমিত সময়ে ব্যবহৃত হতে পারে?

— আনোয়ার

হ্যাঁ, এগুলি সীমাবদ্ধ। প্রতিটি উপাদানের জন্য আপনার কাছে 2 আছে (1x :: এর আগে, 1x :: পরে)।

— ডেভ

Answer 5

উত্তরগুলি সমস্ত সম্ভাব্য সমাধান বলেছে

বাক্স-শ্যাডো সহ আমার আরও একটি আছে

এখানে এটি JSFIDDLE

এবং কোড

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

এটি আই 9 তেও সমর্থন করে, সুতরাং গ্রেডিয়েন্ট সমাধানের চেয়ে এটি আরও ভাল, আরও সমর্থনের জন্য যথাযথ উপসর্গ যুক্ত করুন

আইই 8 এটি সমর্থন করে না, কী লজ্জা!

Answer 6

আপনি প্যাডিংয়ের রঙ সেট করতে পারবেন না।

কাঙ্ক্ষিত পটভূমির রঙের সাথে আপনাকে একটি মোড়ক উপাদান তৈরি করতে হবে। এই উপাদানটিতে সীমানা যুক্ত করুন এবং এটি প্যাডিং সেট করুন।

উদাহরণের জন্য এখানে দেখুন: http://jsbin.com/abanek/1/edit

Comments

আসলে আপনি (আজকাল)

— পুরো

Answer 7

এটি একটি উপযুক্ত সিএসএস সমাধান হবে যা আইই 8/9-তেও কাজ করে (আইটি 8 এইচটিএমএল 5 শিভ অফ কোর্স সহ): কোডেপেন

nav {
  margin:0px auto;
  height:50px;
  background-color:gray;
  padding:10px;
  border:2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Answer 8

এটি করার জন্য কোনও সঠিক কার্যকারিতা নেই।

ভিতরে অন্য একটি উপাদান মোড়ানো না করে, আপনি একটি বাক্স-ছায়া এবং সীমানার মাধ্যমে প্যাডিং দ্বারা সীমানাটি প্রতিস্থাপন করতে পারেন। তবে মনে রাখবেন বাক্স-ছায়া উপাদানটির মাত্রাগুলিতে যোগ করে না।

jsfiddle সত্যিই ধীর হচ্ছে, অন্যথায় আমি একটি উদাহরণ যুক্ত করব।

Answer 9

আমি কেবল অন্য ডিভ দিয়ে শিরোনামটি জড়িয়ে দিয়ে সীমান্ত দিয়ে খেলতাম।

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

সিএসএস:

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Comments

ঠিক আছে .. যাইহোক, আমি যেমন পুরো বাক্সটি ব্যবহার করেছি <nav>, আমি কীভাবে ক্লাস যুক্ত করতে পারি?

— পবন নাদিগ

আমি বিশ্বাস করি <nav>ক্লাস থাকতে পারে। @ মুকামাফুব উত্তরটি একবার দেখুন। আমি ব্রাউজার সমর্থন সম্পর্কে উদ্বিগ্ন হিসাবে আমি আসলে এটি করব না। তবে আপনি যদি HTML5 / CSS3 পছন্দ করেন তবে এটি করার উপায়।

— rlatief 15

Answer 10

আপনি নীচে প্যাডিং উপর একটি ডিভি করতে পারেন:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

প্রস্থ, দৈর্ঘ্য, পটভূমির রঙ, মার্জিন এবং জেড-ইনডেক্স অবশ্যই আলাদা হতে পারে তবে প্যাডিংটি coverাকতে জেড-ইনডেক্সটি অবশ্যই 0 এর চেয়ে বেশি হওয়া উচিত যাতে এটি প্যাডিংয়ের উপরে চলে যায়। আপনি পজিশনিং এর সাথে ঝাঁকুনি দিতে পারেন এবং এর মতিকরণটি পরিবর্তন করতে। আশা করি এইটি কাজ করবে!

পিএস ডিভগুলি এইচটিএমএল এবং # প্যাডিংঅন এবং # প্যাডিংটো দুইটি সিএসএস (যদি কেউ এটি না পায় তবে :)