Mengapa saya tidak bisa menggunakan gambar latar belakang dan warna bersamaan?

Apa yang saya coba lakukan adalah menunjukkan keduanya background-colordan background-image, sehingga setengah dari saya divakan menutupi gambar latar belakang bayangan kanan, dan bagian kiri lainnya akan menutupi warna latar belakang.

Tapi ketika saya gunakan background-image, warnanya menghilang.

Sangat mungkin untuk menggunakan warna dan gambar sebagai latar belakang elemen.

Anda mengatur background-colordan background-imagegaya. Jika gambar lebih kecil dari elemen, Anda perlu menggunakan background-positiongaya untuk menempatkannya di sebelah kanan, dan agar tidak berulang dan menutupi seluruh latar belakang Anda menggunakan background-repeatgaya:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

Atau menggunakan gaya komposit background:

background: green url(images/shadow.gif) right no-repeat;

Jika Anda menggunakan gaya komposit backgrounduntuk mengatur keduanya secara terpisah, hanya yang terakhir yang akan digunakan, itulah salah satu alasan mengapa warna Anda tidak terlihat:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

Tidak ada cara untuk secara khusus membatasi gambar latar belakang untuk menutupi hanya sebagian elemen, jadi Anda harus memastikan bahwa gambar lebih kecil dari elemen, atau memiliki area transparan, agar warna latar belakang terlihat.

Untuk mewarnai gambar, Anda dapat menggunakan CSS3 backgrounduntuk menumpuk gambar dan linear-gradient. Dalam contoh di bawah ini, saya menggunakan linear-gradienttanpa gradien aktual. Browser memperlakukan gradien sebagai gambar (saya pikir itu benar-benar menghasilkan bitmap dan overlay) dan dengan demikian, sebenarnya menumpuk banyak gambar.

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

Akan menghasilkan kertas grafik dengan warna biru muda, jika Anda memiliki png. Perhatikan bahwa susunan susunan mungkin bekerja terbalik dengan model mental Anda, dengan item pertama di atas.

Dokumentasi yang luar biasa dari Mozilla, di sini:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Alat untuk membangun gradien:

http://www.colorzilla.com/gradient-editor/

Catatan - tidak berfungsi di IE11! Saya akan memposting pembaruan ketika saya tahu mengapa, karena itu seharusnya.

menggunakan

background:red url(../images/samle.jpg) no-repeat left top;

Dan untuk menambah jawaban ini , pastikan gambar itu sendiri memiliki latar belakang transparan.

Berikut adalah contoh penggunaan background-imagedan background-colorbersama - sama:

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

Sebenarnya ada cara Anda bisa menggunakan warna latar belakang dengan gambar latar belakang. Dalam hal ini, bagian latar belakang akan diisi dengan warna yang ditentukan alih-alih putih / transparan.

Untuk mencapai itu, Anda perlu mengatur backgroundproperti seperti ini:

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

Catat koma dan kode warna setelahnya no-repeat; ini mengatur warna latar belakang yang Anda inginkan.

Saya menemukan ini di video YouTube ini , namun saya tidak berafiliasi dengan saluran atau video itu dengan cara apa pun.

Jadikan setengah dari gambar transparan sehingga warna latar belakang terlihat melaluinya.

Lain hanya menambahkan div lain yang mengambil 50% wadah div dan mengapungkannya ke kiri atau kanan. Kemudian aplikasikan gambar atau warnanya.

Gecko memiliki bug aneh di mana pengaturan background-coloruntuk htmlpemilih akan menutupi background-imageelemen tubuh meskipun bodyelemen yang berlaku memiliki indeks-z yang lebih besar dan Anda harus dapat melihat tubuh background-imagebersama dengan html background-colorberbasis murni logika sederhana.

Bug tokek

Hindari yang berikut ...

html {background-color: #fff;}
body {background-image: url(example.png);}

Bekerja di Sekitar

body {background-color: #fff; background-image: url(example.png);}

Halo semua yang saya coba cara lain untuk menggabungkan gambar latar dan warna latar:

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

Tolong beri tahu saya jika itu berhasil untuk Anda. Terima kasih

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;