CSS: gambar latar belakang pada warna latar belakang

169

Saya memiliki panel yang saya warnai biru jika panel ini dipilih (diklik). Selain itu, saya menambahkan tanda kecil ( .pnggambar) ke panel itu, yang menunjukkan bahwa panel yang dipilih sudah dipilih sebelumnya.

Jadi jika pengguna melihat misalnya 10 panel dan 4 dari mereka memiliki tanda kecil ini, ia tahu bahwa ia telah mengklik panel itu sebelumnya. Sejauh ini ini bekerja dengan baik. Masalahnya adalah sekarang saya tidak bisa menampilkan tanda kecil dan membuat panel berwarna biru pada saat yang sama.

Saya mengatur panel menjadi biru dengan css background: #6DB3F2;dan gambar latar belakang background-image: url('images/checked.png'). Tetapi tampaknya warna latar belakang berada di atas gambar sehingga Anda tidak dapat melihat tandanya.

Apakah karena itu mungkin untuk menetapkan z-indexes untuk warna latar belakang dan gambar latar belakang?

— mkn
sumber

290

Anda perlu menggunakan nama properti lengkap untuk masing-masing:

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

Atau, Anda dapat menggunakan steno latar belakang dan menentukan semuanya dalam satu baris:

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

— pengelak
sumber

7

Metode 1 tidak bekerja untuk saya. Metode 2, steno bekerja dengan sempurna.

— Steve Breese

1

Nilai gaya tidak aman

— Nexeuz

@Nexeuz mengapa Anda menganggap sintaks gaya ini sebagai Nexeuz tidak aman?

— Webwoman

31

Bagi saya solusi ini tidak berhasil:

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

Tetapi sebaliknya itu bekerja sebaliknya:

<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
sumber

2

Terima kasih untuk kode Francisc !! Seperti yang dia katakan, bergabung dengan warna latar belakang dan gambar tidak memecahkan masalah bagi saya juga. Dengan bantuan itu dan perubahan kecil pada kode saya, saya berhasil memecahkan masalah.

— Mikel

17

Dan jika Anda ingin Menghasilkan Bayangan Hitam di latar belakang, Anda dapat menggunakan yang berikut ini:

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

— Risa__B
sumber

5

Berdasarkan MDN Web Documents Anda dapat mengatur beberapa latar belakang menggunakan backgroundproperti steno atau properti individual kecuali untuk background-color. Dalam kasus Anda, Anda dapat melakukan trik menggunakan linear-gradientseperti ini:

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

Item pertama (gambar) dalam parameter akan diletakkan di atas. Item kedua (latar belakang warna) akan diletakkan di bawah yang pertama. Anda juga dapat mengatur properti lain secara individual. Misalnya, untuk mengatur ukuran dan posisi gambar.

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

Manfaat dari metode ini adalah Anda dapat menerapkannya untuk kasus lain dengan mudah, misalnya, Anda ingin membuat warna biru overlay gambar dengan opacity tertentu.

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;

Parameter properti individual ditetapkan masing-masing. Karena gambar diletakkan di bawah overlay warna, parameter propertinya juga ditempatkan setelah parameter overlay warna.

— Luki B. Subekti
sumber

2

masalah yang sangat menarik, belum melihatnya. kode ini berfungsi dengan baik untuk saya. mengujinya di chrome dan IE9

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

— Ramzi Khahil
sumber

2

Anda juga dapat menggunakan trik pendek untuk menggunakan gambar dan warna seperti ini: -

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

— Kesar Sisodiya
sumber

1

Ini sebenarnya bekerja untuk saya:

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

Anda juga dapat menjatuhkan bayangan padat dan mengatur gambar latar belakang:

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

Jika opsi pertama tidak berfungsi karena alasan tertentu dan Anda tidak ingin menggunakan bayangan kotak Anda selalu dapat menggunakan elemen pseudo untuk gambar tanpa HTML tambahan:

.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án García de Zúñiga
sumber

0

Inilah cara saya menata tombol berwarna saya dengan ikon di latar belakang

Saya menggunakan properti "background-color" untuk warna dan "background" properti untuk gambar.

  <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
sumber

-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>

Contoh Lainnya Kotak Pusat Gambar dan Warna Latar Belakang

1. Clearpixel pertama memperbaiki area gambar 2. gaya kotak area gambar tengah 3.li latar belakang atau gaya warna div

— alpc
sumber

2

CSS sebaris tidak sesuai jika ada opsi lain yang masuk akal.

— Jon Mitten

-10

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

— Vikash pathak
sumber