সিএসএস: পটভূমির রঙের পটভূমি চিত্র

169

আমার এই প্যানেলটি রয়েছে যা আমি নীল রঙিন করেছি যদি এই প্যানেলটি নির্বাচন করা হয় (এটিতে ক্লিক করা হয়)। অতিরিক্তভাবে, আমি .pngসেই প্যানেলে একটি ছোট চিহ্ন ( চিত্র) যুক্ত করি, যা ইঙ্গিত করে যে নির্বাচিত প্যানেলটি ইতিমধ্যে নির্বাচিত হয়েছে।

সুতরাং যদি ব্যবহারকারী উদাহরণস্বরূপ 10 টি প্যানেল দেখে এবং এর মধ্যে 4 টিতে এই ছোট চিহ্ন রয়েছে তবে তিনি জানেন যে তিনি ইতিমধ্যে এই প্যানেলে ক্লিক করেছেন। এই কাজ এখন পর্যন্ত ঠিক আছে। সমস্যাটি হ'ল আমি ছোট চিহ্নটি প্রদর্শন করতে এবং একই সাথে প্যানেলটিকে নীল করতে পারি না।

আমি সিএসএস background: #6DB3F2;এবং পটভূমি চিত্র সহ প্যানেলটিকে নীল করে দিয়েছি background-image: url('images/checked.png')। তবে মনে হচ্ছে ব্যাকগ্রাউন্ডের রঙটি চিত্রের উপরে রয়েছে তাই আপনি সাইনটি দেখতে পাচ্ছেন না।

সুতরাং z-indexপটভূমির রঙ এবং পটভূমি চিত্রের জন্য এস সেট করা সম্ভব ?

— mkn
সূত্র

289

আপনার প্রত্যেকের জন্য পুরো সম্পত্তির নাম ব্যবহার করা দরকার:

background-color: #6DB3F2;
background-image: url('images/checked.png');

বা, আপনি ব্যাকগ্রাউন্ড শর্টহ্যান্ড ব্যবহার করতে পারেন এবং এগুলি সমস্ত এক লাইনে নির্দিষ্ট করতে পারেন:

background: url('images/checked.png'), #6DB3F2;

— চতুর দুর্বৃত্ত
সূত্র

7

1 ম পদ্ধতিটি আমার পক্ষে কাজ করে নি। ২ য়, শর্টহ্যান্ড পদ্ধতিটি পুরোপুরি কাজ করে।

— স্টিভ ব্রি

1

অনিরাপদ শৈলীর মান

— Nexeuz

@ নেক্সিজ কেন আপনি এই স্টাইলের বাক্য গঠনটিকে অনিরাপদ নেক্সিউজ হিসাবে বিবেচনা করছেন?

— ওয়েবউম্যান

31

আমার জন্য এই সমাধানটি কার্যকর হয়নি:

background-color: #6DB3F2;
background-image: url('images/checked.png');

তবে পরিবর্তে এটি অন্যভাবে কাজ করেছে:

<div class="block">
<span>
...
</span>
</div>

সিএসএস:

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

— ফ্রান্সিস আকনাই
সূত্র

2

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

— মাইকেল

17

এবং আপনি যদি পটভূমিতে একটি কালো ছায়া তৈরি করতে চান তবে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

— Risa__B
সূত্র

5

উপর ভিত্তি করে MDN ওয়েব ডক্স আপনি সাধারণভাবে সংক্ষেপে ব্যবহার করে অনেকগুলি পটভূমি সেট করতে পারেন backgroundসম্পত্তি বা ছাড়া পৃথক বৈশিষ্ট্য background-color। আপনার ক্ষেত্রে, আপনি এটি ব্যবহার করে একটি কৌশল করতে পারেন linear-gradient:

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

প্যারামিটারে প্রথম আইটেম (চিত্র) শীর্ষে রাখা হবে। দ্বিতীয় আইটেম (রঙের পটভূমি) প্রথমটির নীচে রাখা হবে। আপনি পৃথকভাবে অন্যান্য বৈশিষ্ট্যও সেট করতে পারেন। উদাহরণস্বরূপ, চিত্রের আকার এবং অবস্থান নির্ধারণ করতে।

background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;

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

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;

পৃথক সম্পত্তি প্যারামিটার যথাক্রমে সেট করা হয়। যেহেতু চিত্রটি রঙের ওভারলে এর নীচে রাখা হয়েছে, এর সম্পত্তি পরামিতিগুলি রঙ ওভারলে পরামিতিগুলির পরেও স্থাপন করা হবে।

— লুকি বি সুব্যাক্তি
সূত্র

2

সত্যিই আকর্ষণীয় সমস্যা, এটি এখনও দেখেনি। এই কোডটি আমার পক্ষে কাজ করে। এটি ক্রোম এবং আইই 9 তে পরীক্ষা করেছে

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

— রমজী খাহিল
সূত্র

2

আপনি এই জাতীয় চিত্র এবং রঙ উভয় ব্যবহার করতে শর্ট ট্রিক ব্যবহার করতে পারেন: -

body {
     background:#000 url('images/checked.png');
 }

— কেশর সিসোদিয়া
সূত্র

1

এটি আসলে আমার পক্ষে কাজ করে:

background-color: #6DB3F2;
background-image: url('images/checked.png');

আপনি একটি শক্ত ছায়া ফেলে এবং পটভূমি চিত্র সেট করতে পারেন:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

যদি প্রথম বিকল্পটি কোনও কারণে কাজ না করে এবং আপনি বাক্সের ছায়াটি ব্যবহার করতে না চান তবে আপনি কোনও অতিরিক্ত এইচটিএমএল ছাড়াই সর্বদা চিত্রের জন্য ছদ্ম উপাদানটি ব্যবহার করতে পারেন:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— ফার্নান গার্সিয়া দে জাইগা
সূত্র

0

পটভূমির আইকন সহ আমি কীভাবে আমার রঙিন বোতামগুলি স্টাইল করেছি তা এখানে

আমি রঙের জন্য "ব্যাকগ্রাউন্ড-রঙ" বৈশিষ্ট্য এবং চিত্রটির জন্য "পটভূমি" সম্পত্তি ব্যবহার করেছি।

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

— দা বিগিনিয়ার
সূত্র

-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

অন্যান্য নমুনা বক্স কেন্দ্রের চিত্র এবং পটভূমি রঙ

1. প্রথম ক্লিয়ারপিক্সেল ফিক্স ইমেজ এরিয়া 2. স্টাইল সেন্টার ইমেজ এরিয়া বক্স 3. এলি ব্যাকগ্রাউন্ড বা ডিভ কালার স্টাইল

— alpc
সূত্র

2

অন্য কোনও যুক্তিসঙ্গত বিকল্প থাকলে ইনলাইন সিএসএস উপযুক্ত নয়।

— জন মিটেন 21'15

-10

body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}

— বিকাশ পাঠক
সূত্র