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


179

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.


7
Apa kode CSS Anda?
outis

Jawaban:


299

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.


3
Bagaimana saya membuatnya bekerja? Saya ingin menggunakan background: -webkit-linear-gradient(bottom, rgb(222,222,222) 19%, rgb(201,201,201) 50%, rgb(219,219,219) 80%); AND background-image: url(icon.png) no-repeat right;Bagaimana saya menerapkan gradien dan ikon gambar. Tolong bantu.
Anish Nair


2
RE: @AnishNair - Ini background:adalah singkatan dan kemudian mengasumsikan tidak ada gambar yang ditentukan dan berjalan di atasbackground-image
sheriffderek

1
Inilah yang menyebabkan saya masalah - Terima kasih! Jika Anda menggunakan latar belakang gaya komposit untuk mengatur keduanya secara terpisah, hanya yang terakhir yang akan digunakan, itulah salah satu alasan yang memungkinkan mengapa warna Anda tidak terlihat:
GeminiDakota

30

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.



12

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


Tambahan yang bagus Ini terjadi pada saya ketika saya menggunakan .jpg bukan .png
corbin

1
Jangan memposting ini sebagai jawaban na lebih baik sebagai komentar.
Iharob Al Asimi

2
Apakah Anda melihat sejak kapan ini ?! Praktis generasi pendiri. Itu liar barat, tidak ada aturan. Kalian semua pemula mendapatkan semuanya di piring emas ;-)
Itay Moav -Malimovka

2

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>


2

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.


1
Saya meragukan ini, kaget ternyata bekerja dengan cukup baik. Akan perlu mencari kompatibilitas untuk itu.! +1
Nicky Thomas

0

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.


Ini mengasumsikan gambar latar belakang Anda sebesar div yang mengandung.
mr-euro

0

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

0

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


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

2
Bagaimana / Mengapa ini menjawab pertanyaan? Tolong uraikan dengan mengedit jawaban Anda.
Artjom B.

Dua baris seperti ini tidak perlu. Itu bisa dimasukkan ke dalam satu deklarasi. Lihat contoh lain di sini di halaman. background: red url(directoryName/imageName.extention) bottom left no-repeat;
Kout
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.