CSS: ภาพพื้นหลังเป็นสีพื้นหลัง

169

ฉันมีแผงที่ฉันมีสีฟ้าถ้าแผงนี้จะถูกเลือก (คลิกที่มัน) นอกจากนี้ฉันเพิ่มสัญญาณขนาดเล็ก ( .pngภาพ) ลงในแผงควบคุมซึ่งระบุว่าแผงที่เลือกได้ถูกเลือกไว้ก่อนหน้า

ดังนั้นหากผู้ใช้เห็นตัวอย่าง 10 พาเนลและ 4 ในนั้นมีเครื่องหมายขนาดเล็กนี้เขารู้ว่าเขาได้คลิกบนพาเนลเหล่านั้นมาก่อน ใช้งานได้ดีจนถึงตอนนี้ ปัญหาคือตอนนี้ฉันไม่สามารถแสดงสัญญาณขนาดเล็กและทำให้แผงสีฟ้าในเวลาเดียวกัน

ผมตั้งแผงสีฟ้าที่มี CSS และภาพพื้นหลังด้วยbackground: #6DB3F2; background-image: url('images/checked.png')แต่ดูเหมือนว่าสีพื้นหลังจะอยู่เหนือภาพดังนั้นคุณจึงไม่เห็นเครื่องหมาย

เป็นไปได้ไหมที่จะตั้งค่าz-indexes สำหรับสีพื้นหลังและภาพพื้นหลัง?

— MKN
แหล่งที่มา

289

คุณต้องใช้ชื่อคุณสมบัติแบบเต็มสำหรับแต่ละรายการ:

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

หรือคุณสามารถใช้ชวเลขพื้นหลังและระบุทั้งหมดในบรรทัดเดียว:

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

— Dodger
แหล่งที่มา

7

วิธีที่ 1 ไม่ได้ผลสำหรับฉัน วิธีที่ 2 การจดชวเลขทำงานได้อย่างสมบูรณ์แบบ

— Steve Breese

1

ค่ารูปแบบไม่ปลอดภัย

— Nexeuz

@Nexeuz ทำไมคุณถึงพิจารณาว่ารูปแบบไวยากรณ์นี้เป็น Nexeuz ที่ไม่ปลอดภัย

— Webwoman

31

สำหรับฉันวิธีนี้ไม่ได้ผล:

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

แต่มันกลับใช้วิธีอื่นแทน:

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

CSS:

.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%;
}

— Francisc Aknai
แหล่งที่มา

2

ขอบคุณสำหรับรหัส Francisc !! อย่างที่เขาบอกการเข้าร่วมกับสีพื้นหลังและรูปภาพก็ไม่ได้ช่วยแก้ปัญหาสำหรับฉันเช่นกัน ด้วยความช่วยเหลือและการเปลี่ยนแปลงเล็กน้อยในรหัสของฉันฉันจัดการเพื่อแก้ไขปัญหา

— มิเคล

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;

พารามิเตอร์คุณสมบัติส่วนบุคคลถูกตั้งค่าตามลำดับ เนื่องจากภาพถูกวางไว้ใต้การซ้อนทับสีพารามิเตอร์คุณสมบัติจึงถูกวางไว้หลังจากพารามิเตอร์การซ้อนทับสี

— Luki B. Subekti
แหล่งที่มา

2

ปัญหาที่น่าสนใจจริงๆยังไม่เคยเห็นมาก่อน รหัสนี้ทำงานได้ดีสำหรับฉัน ทดสอบใน Chrome และ IE9

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

— Ramzi Khahil
แหล่งที่มา

2

นอกจากนี้คุณยังสามารถใช้เคล็ดลับสั้น ๆ เพื่อใช้ภาพและสีได้เช่นกัน: -

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

— Kesar Sisodiya
แหล่งที่มา

1

ใช้งานได้จริงสำหรับฉัน:

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

คุณสามารถวางเงาทึบและตั้งค่าภาพพื้นหลัง:

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

หากตัวเลือกแรกไม่ทำงานด้วยเหตุผลบางอย่างและคุณไม่ต้องการใช้เงากล่องคุณสามารถใช้องค์ประกอบเทียมสำหรับภาพโดยไม่มี HTML พิเศษใด ๆ :

.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');
}

— FernánGarcía de Zúñiga
แหล่งที่มา

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>

— Da Beginer
แหล่งที่มา

-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. พื้นหลังหรือสไตล์สี div

— alpc
แหล่งที่มา

2

Inline CSS ไม่เหมาะสมหากมีตัวเลือกอื่นที่สมเหตุสมผล

— Jon Mitten

-10

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

— Vikash Pathak
แหล่งที่มา