CSS ব্যবহার করে আমি কীভাবে পাঠ্যের প্রস্থের জন্য পুরো উপাদানটির প্রস্থের জন্য একটি পটভূমি রঙ সেট করব?

Question

আমি যা চাই তা হ'ল সবুজ পটভূমি পৃষ্ঠার প্রস্থের 100% না হয়ে পাঠ্যের ঠিক পিছনে থাকবে। আমার বর্তমান কোডটি এখানে:

h1 { 
    text-align: center; 
    background-color: green; 
}

<h1>The Last Will and Testament of Eric Jones</h1> 

Comments

একটি স্প্যান না puttingোকানো ছাড়া এটি করা যেতে পারে?

— থোমাস-পিটার

স্প্যানটি যুক্ত এড়ানোর জন্য আপনি <h1> ডিসপ্লে সম্পত্তিটি ব্লক থেকে ইনলাইনে পরিবর্তন করতে পারতেন (ধরুন আপনি <h1> ব্লকের উপাদানগুলির পরে উপাদানগুলি নিশ্চিত করতে পারেন

— ড্যান

Answer 1

পাঠ্যটিকে একটি ইনলাইন উপাদানে রাখুন , যেমন একটি <span>।

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

এবং তারপরে ইনলাইন উপাদানটিতে ব্যাকগ্রাউন্ডের রঙটি প্রয়োগ করুন।

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

একটি ইনলাইন উপাদান এর বিষয়বস্তুগুলির মতো বড়, তাই এটি আপনার জন্য করা উচিত।

Comments

ধন্যবাদ, এটি লজ্জাজনক, আমি এইচটিএমএল সংশোধন করতে পারি না।

— থোমাস-পিটার

@ টম: আপনি স্প্যান লাগাতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন

— BalusC

ধন্যবাদ, তবে আমার কাছে কেবল সিএসএস সংশোধন করার অনুমতি রয়েছে। কিছু মনে করো না.

— থোমাস-পিটার

এইচ 1 নির্বাচকটিতে কেবল ডিসপ্লে সিএসএস নিয়ম যুক্ত করুন, আপনাকে <span> ট্যাগ যুক্ত করতে হবে না। এটি পছন্দ করুন:h1 { display:inline; }

— লুডো - রেকর্ডটি অফ

প্রদর্শন: পরবর্তী উত্তরের মন্তব্য বিভাগে হাইলাইট হওয়া সমস্যাটি এড়াতে সারণি একটি ভাল পছন্দ ... প্রদর্শন: ইনলাইন <h1> এবং <h2> একই লাইনে থাকতে হবে .... যখন তারা মূলত পরবর্তী লাইনে থাকবে।

— ihightower

Answer 2

বিকল্প 1

display: table;

• কোন পিতামাতার প্রয়োজন

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<h1>The Last Will and Testament of Eric Jones</h1>

বেহালা

http://jsfiddle.net/J7VBV/293/

অধিক

display: table উপাদানটিকে একটি সাধারণ এইচটিএমএল টেবিলের মতো আচরণ করতে বলে।

ডাব্লু 3 স্কুল , সিএসএস ট্রিকস এবং এখানে এটি সম্পর্কে আরও

---

বিকল্প 2

display: inline-flex;

• text-align: center;পিতামাতার উপর প্রয়োজন

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

---

বিকল্প 3

display: flex;

• একটি ফ্লেক্স প্যারেন্ট পাত্রে প্রয়োজন

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

সম্পর্কিত

সম্ভবত ফ্লেক্সবক্সের সর্বাধিক জনপ্রিয় গাইড এবং আমি নিয়মিত উল্লেখ করা একটি সিএসএস ট্রিক্সে রয়েছে

---

বিকল্প 4

display: block;

• একটি ফ্লেক্স প্যারেন্ট পাত্রে প্রয়োজন

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

---

বিকল্প 5

::before

• সিএসএস ফাইলে শব্দ প্রবেশের প্রয়োজন (খুব ব্যবহারিক নয়)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}

<h1></h1>

বেহালা

http://jsfiddle.net/J7VBV/457/

সম্পর্কিত

CSS সিউডো উপাদানগুলি সম্পর্কে আরও :: :: আগে এবং :: সিএসএস এ ট্রিকস এবং সিউডো উপাদানগুলি সাধারণভাবে ডাব্লু 3 স্কুলগুলিতে

---

বিকল্প 6

display: inline-block;

• কেন্দ্রীকরণ position: absoluteএবংtranslateX

• একটি position: relativeপিতামাতার প্রয়োজন

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

  <h1>The Last Will and Testament of Eric Jones</h1>

সম্পর্কিত

আরো অনেক কিছু দিয়ে কেঁদ্রীকরণ উপর transform: translate();(এবং সাধারণভাবে কেন্দ্র করে) এই সিএসএস ঠাট নিবন্ধ

---

বিকল্প 7

text-shadow: এবং box-shadow:

• ওপি যা খুঁজছিল তা নয় তবে অন্যদের এখানে পথ খুঁজে পেতে সহায়তা করতে পারে।

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}

<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

বেহালা

https://jsfiddle.net/Hastig/t8L9Ly8o/

আরও বিকল্প

উপরে বর্ণিত বিভিন্ন বিকল্প বিকল্প এবং কেন্দ্রিক পদ্ধতিগুলি একত্রিত করে আরও কয়েকটি উপায় রয়েছে ways

Comments

কোনও পাত্রে এবং কোনও সিউডো-উপাদান ছাড়াই এটি করা সহজতর দুর্দান্ত! display: tableএটি এত শক্তিশালী হতে পারে তার কোনও ধারণা ছিল না , তবে আমি প্রশংসা করি যে আপনি কাজের বিকল্প সরবরাহ করেছেন।

— সিপিএইচপিথন

Answer 3

খেলায় একটু দেরি হলেও ভেবেছিলাম আমি আমার 2 সেন্ট যোগ করব ...

কোনও অভ্যন্তরীণ স্প্যানের অতিরিক্ত চিহ্ন-আপ যুক্ত এড়াতে আপনি <h1>প্রদর্শন বৈশিষ্ট্যটি থেকে পরিবর্তন করতে blockপারেন inline(ধরুন আপনি <h1>ব্লক উপাদানগুলির পরে উপাদানগুলি নিশ্চিত করতে পারবেন ।

এইচটিএমএল

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

সিএসএস

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

ফলাফল

JSFIDDLE http://jsfiddle.net/J7VBV/

Comments

সঠিক? সত্যি? এইভাবে শিরোনামটি আর কেন্দ্রিক নয় (কারণ এটি ইনলাইন প্রদর্শিত হয়)। ওপির প্রশ্নের মধ্যে স্পষ্টতই একটি কেন্দ্রিক শিরোনামের প্রয়োজনীয়তা অন্তর্ভুক্ত রয়েছে।

— বালুস সি

@ বালুসসি - মূল প্রশ্নে কোথাও ওপি নির্দিষ্টভাবে শিরোনামকে কেন্দ্রিক হতে হবে তা উল্লেখ করে না। প্রশ্নটি পরিষ্কারভাবে জিজ্ঞাসা করে যে কীভাবে সবুজ পটভূমি পুরো প্রস্থে না যায়। # আসফসায়িং

— ডান

ওপির স্ক্রিনশট এবং ওপির প্রাথমিক সিএসএস অন্যথায় বোঝায়।

— বালুস সি

এটি সম্ভবত, তবে আমরা এখানে স্পেসিফিকস বলছি - অনুমান নয়।

— ড্যান

এটি ক্ষেত্রে সমস্যা যুক্ত করেছে .. যেখানে <h1> এবং <h2> ট্যাগগুলি যদি পরের লাইনে অবিলম্বে হয় ... তবে <h1> এবং <h2> একই লাইনে প্রদর্শিত হবে। নীচের প্রদর্শন: টেবিল বিকল্পটি একটি ভাল পছন্দ যদি আপনি <h1> <h2> ট্যাগগুলির নিজের উত্স কোডটি নিজেই পরিবর্তন করতে না চান ... তবে কেবল সিএসএস পরিবর্তন করুন।

— ihightower

Answer 4

এটি করার একটি খুব সহজ কৌশল, একটি <span>ট্যাগ যুক্ত করা এবং এটিতে পটভূমির রঙ যুক্ত করা। এটি আপনি যেভাবে চান তেমন দেখায়।

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1> 

এবং সিএসএস

h1 { text-align: center; }
h1 span { background-color: green; }

কেন?

<span> একটি ইনলাইন উপাদান ট্যাগে ট্যাগ করুন, সুতরাং এটি কেবল প্রভাবটি ভুগতে পারে over

Answer 5

সম্পাদনা: নীচের উত্তরটি বেশিরভাগ ক্ষেত্রেই প্রযোজ্য। ওপি পরে উল্লেখ করেছে যে তারা সিএসএস ফাইল ব্যতীত অন্য কোনও কিছু সম্পাদনা করতে পারে না। তবে এটি এখানে রেখে দেবে যাতে এটি অন্যের কাজে লাগতে পারে।

অন্যরা অবহেলা করছে এমন প্রধান বিবেচনাটি ওপি জানিয়েছেন যে তারা এইচটিএমএল সংশোধন করতে পারবেন না।

আপনি ডিওমে যা প্রয়োজন তা লক্ষ্যবস্তু করতে পারেন তারপরে জাভাস্ক্রিপ্ট সহ গতিশীল ক্লাস যুক্ত করতে পারেন। তারপরে আপনার প্রয়োজন মতো স্টাইল করুন।

আমি যে উদাহরণটি তৈরি করেছি, আমি <p>jQuery এর সাথে সমস্ত উপাদানকে লক্ষ্য করেছিলাম এবং "রঙিন" শ্রেণীর সাথে একটি ডিভ দিয়ে মুড়ে ফেলেছিলাম

$( "p" ).wrap( "<div class='colored'></div>" );

তারপরে আমার সিএসএসে আমি টার্গেট করে <p>এটিকে পটভূমির রঙ দিয়েছি এবং এতে পরিবর্তন করেছিdisplay: inline

.colored p {
    display: inline;
    background: green;
}

ডিসপ্লেটিকে ইনলাইনে সেট করে আপনি স্টাইলের কিছু হারিয়ে ফেলেন যা এটি সাধারণত উত্তরাধিকার সূত্রে প্রাপ্ত হয়। সুতরাং নিশ্চিত হয়ে নিন যে আপনি আপনার নির্দিষ্ট ডিজাইনের বাকী ফিট করার জন্য সুনির্দিষ্ট উপাদান এবং স্টাইলটিকে ধারক করেছেন। এটি কেবল একটি কার্যকারী পয়েন্টিং পয়েন্ট হিসাবে বোঝানো হয়েছে। সাবধানে ব্যবহার করুন। কোডপেনে কাজ করা ডেমো

Answer 6

এইচ 1 একটি ব্লক স্তর উপাদান। পরিবর্তে আপনাকে স্প্যানের মতো কিছু ব্যবহার করতে হবে কারণ এটি একটি ইনলাইন স্তর উপাদান (যেমন: এটি পুরো সারিতে বিস্তৃত নয়)।

আপনার ক্ষেত্রে, আমি নিম্নলিখিতটি সুপারিশ করব:

style.css

.highlight 
{
   background-color: green;
}

এইচটিএমএল

<span class="highlight">only the text will be highlighted</span>

Answer 7

অন্য উত্তরগুলির নোট হিসাবে, আপনি এটিকে কাজ করতে পেতে আপনার পাঠ্যের চারপাশে background-colorএকটি যুক্ত করতে পারেন <span>।

আপনি যেখানে আছেন সেখানে ক্ষেত্রে আপনি line-heightফাঁকগুলি দেখতে পাবেন। এটি ঠিক করার জন্য box-shadowআপনি আপনার স্প্যানটিতে কিছুটা বাড়ার যোগ করতে পারেন । আপনি box-decoration-break: clone;ফায়ারফক্সকে এটি যথাযথভাবে রেন্ডার করতে চান ।

সম্পাদনা: আপনি যদি outline: 1px solid [color];আই -11 এ বাক্স-ছায়া নিয়ে সমস্যাগুলি পান তবে কেবল আইই এর জন্য একটি যুক্ত করার চেষ্টা করুন ।

এটি ক্রিয়ায় দেখতে কেমন লাগে তা এখানে:

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}

<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

Answer 8

পাঠ্য-প্রান্তিককরণ কেন্দ্রটি মুছে ফেলার চেষ্টা করুন এবং পাঠ্যটি এতে থাকে <h1>বা কেন্দ্র করে <div>।

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

Answer 9

অনুচ্ছেদ এবং শিরোনাম ট্যাগের মধ্যে এইচটিএমএল 5 চিহ্ন ট্যাগ ব্যবহার করতে পারেন ।

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

Answer 10

আপনি এইচটিএমএল 5 <mark>ট্যাগ ব্যবহার করতে পারেন ।

এইচটিএমএল:

<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>

সিএসএস:

mark
{
    background-color: green;
}

Comments

— ওপিতে

Answer 11

আর একবার চেষ্টা কর:

h1 {
    text-align: center;
    background-color: green;
    visibility: hidden;
}

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

দয়া করে নোট করুন যে ক্যালক সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয় :) কেবলমাত্র মূল পোস্টে সারিবদ্ধ হওয়ার সাথে সামঞ্জস্য থাকতে চান।

https://jsfiddle.net/richardferaro/ssyc04o4/

Answer 12

আপনাকে এইচ 1 ট্যাগের প্রস্থ উল্লেখ করতে হবে ..

আপনার সিএসএস এর মত হবে

h1 {
text-align: center;
background-color: green;
width: 600px;
 }

Answer 13

এইচটিএমএল

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

CSS

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

কোডেপেনে ডেমো

Comments

ফায়ারফক্সের প্রয়োজন box-decoration-break: clone;, বিকাশকারী.মোজিলা.আর.ইন

— ইউএস /

Answer 14

এইচটিএমএল

<h1 class="green-background"> Whatever text you want. </h1>

সিএসএস

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}

Comments

কোড-কেবল এমন যে কোনও উত্তর এই সমস্যার সমাধান খুঁজছেন এমন লোকদের জন্য আরও কার্যকর করা যেতে পারে যদি আপনি নিজের উত্তরে কিছু প্রসঙ্গ যুক্ত করতে পারেন।

— ডেভিড বাক

Answer 15

<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>

Comments

আমরা হব. এটি কিছু কোড। কিছু কিছু কোড। এটি সম্পূর্ণ ব্যাখ্যা থেকে মুক্ত of শিরোনামটি তার চারপাশের সামগ্রীর সাথে কীভাবে আচরণ করে তা পরিবর্তনের পার্শ্ব প্রতিক্রিয়া রয়েছে। এটি স্ট্যাকওভারফ্লো. com/ a / 32919558/ 19068 এবং স্ট্যাকওভারফ্লো. com / a/ 20257339 / 19068 উভয়ই ইতিমধ্যে বলেনি এমন কিছুই বলেছে

— কোয়ান্টিন