Bagaimana cara menggabungkan gambar latar belakang dan gradien CSS3 pada elemen yang sama?


1251

Bagaimana cara menggunakan gradien CSS3 untuk saya background-colordan kemudian menerapkan a background-imageuntuk menerapkan semacam tekstur transparan cahaya?


9
Catatan: Anda juga dapat memposisikan gambar latar belakang (15px tengah) atau mengatur properti 'repeat' dengan cara ini (contohnya berfungsi untuk Firefox 3.6+) .some-class {background: url ("../ icon.png") no- ulangi 15px center, -moz-linear-gradient (tengah atas, #FFFFFF, #DDDDDD);}
Julien Bérubé

SVG atau SVG + CSS masing-masing dapat digunakan untuk membuat tekstur datar (noise) atau gradien bertekstur.
Clint Pachl

Jawaban:


1544

Berbagai latar belakang!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

2 baris ini adalah cadangan untuk browser apa pun yang tidak melakukan gradien. Lihat catatan untuk hanya menumpuk gambar IE <9 di bawah ini.

  • Baris 1 menetapkan warna latar belakang datar.
  • Baris 2 mengatur mundur gambar latar belakang.

Baris terakhir menetapkan gambar latar belakang dan gradien untuk browser yang dapat menanganinya.

  • Baris 3 adalah untuk semua browser yang relatif modern.

Hampir semua browser saat ini memiliki dukungan untuk banyak gambar latar belakang dan latar belakang css. Lihat http://caniuse.com/#feat=css-gradients untuk dukungan browser. Untuk posting yang bagus tentang mengapa Anda tidak memerlukan banyak awalan peramban, lihat http://codepen.io/thebabydino/full/pjxVWp/

Lapisan Tumpukan

Perlu dicatat bahwa gambar yang didefinisikan pertama akan paling atas di tumpukan. Dalam hal ini, gambar berada di atas gradien.

Untuk informasi lebih lanjut tentang pelapisan latar belakang, lihat http://www.w3.org/TR/css3-background/#layering .

Susun gambar HANYA (tidak ada gradien dalam deklarasi) Untuk IE <9

IE9 dan yang lebih tinggi dapat menumpuk gambar dengan cara yang sama. Anda dapat menggunakan ini untuk membuat gambar gradien untuk ie9, meskipun secara pribadi, saya tidak akan melakukannya. Namun yang perlu diperhatikan saat menggunakan hanya gambar, yaitu <9 akan mengabaikan pernyataan mundur dan tidak menampilkan gambar apa pun. Ini tidak terjadi ketika gradien dimasukkan. Untuk menggunakan gambar fallback tunggal dalam hal ini saya sarankan menggunakan elemen HTML Conditional indah Paul Irish bersama dengan kode fallback Anda:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Posisi latar belakang, ukuran dll.

Properti lain yang akan berlaku untuk satu gambar juga dapat dipisahkan dengan koma. Jika hanya 1 nilai yang diberikan, itu akan diterapkan ke semua gambar yang ditumpuk termasuk gradien. background-size: 40px;akan membatasi gambar dan gradien hingga tinggi dan lebar 40px. Namun menggunakan background-size: 40px, cover;akan membuat gambar 40px dan gradien akan menutupi elemen. Untuk hanya menerapkan pengaturan ke satu gambar, atur default untuk yang lain: background-position: 50%, 0 0;atau untuk browser yang mendukungnya gunakan initial:background-position: 50%, initial;

Anda juga dapat menggunakan steno latar belakang, namun ini menghilangkan warna dan gambar mundur.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Hal yang sama berlaku untuk posisi latar belakang, pengulangan latar belakang, dll.


36
Terima kasih atas jawaban Anda, ada ide tentang bagaimana cara mengontrol background-positionhanya untuk gambar dan bukan gradien?
adardesign

44
terima kasih untuk ini, informasi yang sangat bagus. | @adardesign: gunakan singkatan latar belakang. Mengubah contoh di atas, itu akan menjadi: background: url (IMAGE_URL) no-repeat atas kiri, [gradien yang sesuai];
RussellUresti

14
@adardesign: latar belakang: url ("../ images / icon.png") no-repeat center 15px, -moz-linear-gradient (tengah atas, #FFFFFF, #DDDDDD); / * perhatikan pusat 15px, ia akan menambahkan padding kiri 15px dan sejajarkan vertikal di tengah ikon.png * /
Julien Bérubé

2
di chrome atleast Anda dapat mengontrol posisi latar belakang untuk banyak gambar menggunakan koma untuk memisahkan nilai .. seperti ini .. posisi latar belakang: 0px 8px, 0px 0px ...
Orlando

1
Mungkin juga perlu dicatat bahwa jika Anda perlu menentukan posisi atribut lain dari gambar, Anda dapat menggunakan properti css latar belakang nanti dalam aturan css. Misalnya: background-repeat: no-repeat; posisi latar belakang: tengah; ukuran latar: 1300px 1303px;
Phill Healey

86

Jika Anda juga ingin mengatur posisi latar belakang untuk gambar Anda, Anda dapat menggunakan ini:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

atau Anda juga dapat membuat mixin KURANG (gaya bootstrap):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Satu-satunya di halaman ini yang bekerja untuk saya. Saya menggunakannya dengan CSS normal. Semua yang saya coba sebenarnya menyembunyikan gambar dengan warna gradien overlay.
Ska

@ Ska - Balikkan urutannya kemudian. Z-index bekerja sebaliknya di sini. Lihat stackoverflow.com/questions/14915542/… .
Frank Conijn

46

Satu hal yang perlu disadari adalah bahwa gambar latar belakang pertama yang didefinisikan paling atas dalam tumpukan. Gambar yang didefinisikan terakhir akan paling bawah. Itu berarti, untuk memiliki gradien latar belakang di belakang gambar, Anda perlu:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Anda juga dapat menentukan posisi latar belakang dan ukuran latar belakang untuk gambar. Saya mengumpulkan posting blog tentang beberapa hal menarik yang dapat Anda lakukan dengan gradien CSS3


2
Jawaban akan lebih baik, ketika notasi standar W3C datang di akhir.
Volker E.

4
Kode ini sepertinya tidak berfungsi dengan baik sobat. kita hanya bisa melihat gambar stackOverflow, bukan gambar latar belakang di belakang / sebelum itu.
Atau A.

Saya pikir -webkit-gradient mungkin sudah usang stackoverflow.com/questions/10683364/…
alpalalpal

Kode mungkin tidak berfungsi tetapi ini adalah poin yang sangat penting. Anda dapat menyusun ulang cara elemen-elemen latar belakang bekerja tetapi Anda harus memikirkannya sebagai lapisan. Jika Anda ingin gradien di atas gambar, taruh dulu dan Anda mungkin ingin kami RGBa sehingga Anda dapat melihat gambar di belakang:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
serraosays

34

Anda cukup mengetik:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);


1
Ini adalah satu-satunya solusi yang berfungsi untuk saya (Firefox v57). The linear-gradient()harus datang sebelum url(), dan transparansi parsial telah digunakan untuk warna gradien, menggunakan rgba(). Apa pun yang lain hanya menggunakan definisi pertama pada daftar (seolah-olah yang kedua adalah mundur, mirip dengan cara font-familykerja deklarasi).
waldyrious

@waldyrious perhatikan bahwa pengguna ingin menerapkan semacam tekstur transparan ringan di atas gradien linier sehingga gambar harus didahulukan karena harus ditampilkan di atas gradien
Alex Guerrero

Pengomposisian suatu gambar dan gradien melalui semi transparansi harus memiliki efek yang sama terlepas dari yang mana yang ada di depan. Namun, Anda selalu dapat menentukan gradien Anda untuk memiliki transparansi, tetapi gambar yang belum semi-transparan tidak dapat dengan mudah / secara dinamis dikonversi untuk digunakan dengan cara ini. Itu sebabnya saya menemukan pendekatan menempatkan gradien lebih dulu lebih bermanfaat secara umum.
waldyrious

21

Saya selalu menggunakan kode berikut untuk membuatnya berfungsi. Ada beberapa catatan:

  1. Jika Anda menempatkan URL gambar sebelum gradien, gambar ini akan ditampilkan di atas gradien seperti yang diharapkan.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. Jika Anda menempatkan gradien sebelum URL gambar, gambar ini akan ditampilkan di bawah gradien.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

Teknik ini sama seperti kita memiliki beberapa gambar latar belakang seperti yang dijelaskan di sini


Bagus! Saya berani ini -> Jika Anda menempatkan gradien sebelum URL gambar, gambar ini akan ditampilkan di bawah gradien.
aldyahsn

20

solusi saya:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

3
Solusi ini berfungsi dalam kasus saya untuk menampilkan gradien di atas gambar, jika tidak maka akan disembunyikan oleh gambar.
vizFlux

15

Saya memiliki implementasi di mana saya perlu mengambil teknik ini selangkah lebih jauh, dan ingin menguraikan pekerjaan saya. Kode di bawah melakukan hal yang sama tetapi menggunakan SASS, Bourbon, dan sprite gambar.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS dan Bourbon mengurus kode browser lintas, dan sekarang semua saya harus menyatakan adalah posisi sprite per tombol. Mudah untuk memperpanjang prinsip ini untuk tombol yang aktif dan melayang-layang.


5

Jika Anda memiliki kesalahan aneh dengan mengunduh gambar latar belakang gunakan pemeriksa Tautan W3C: https://validator.w3.org/checklink

Berikut adalah mixin modern yang saya gunakan (kredit: PSA: jangan gunakan generator gradien ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

4

Ini adalah MIXIN yang saya buat untuk menangani semua hal yang mungkin ingin digunakan orang:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Ini bisa digunakan seperti:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Semoga kalian menemukan ini bermanfaat.

kredit ke @Gidgidonihah untuk menemukan solusi awal.


3

Saya mencoba melakukan hal yang sama. Sementara warna latar belakang dan gambar latar belakang ada pada lapisan terpisah dalam suatu objek - artinya mereka dapat hidup berdampingan - gradien CSS tampaknya mengkooptasi lapisan gambar latar belakang.

Dari apa yang saya tahu, border-image tampaknya memiliki dukungan yang lebih luas daripada banyak latar belakang, jadi mungkin itu pendekatan alternatif.

http://articles.sitepoint.com/article/css3-border-images

UPDATE: Sedikit riset. Tampaknya Petra Gregorova memiliki sesuatu yang berfungsi di sini -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html


2

Anda bisa menggunakan banyak latar belakang: linear-gradient (); panggilan, tetapi coba ini:

Jika Anda ingin gambar menjadi benar-benar menyatu bersama di mana itu tidak terlihat seperti elemen memuat secara terpisah karena permintaan HTTP yang terpisah maka gunakan teknik ini. Di sini kita memuat dua hal pada elemen yang sama yang memuat secara bersamaan ...

Pastikan Anda mengonversi gambar / tekstur png transparan 32-bit yang Anda buat sebelumnya menjadi string base64 terlebih dahulu dan menggunakannya dalam panggilan gambar latar belakang css (menggantikan INSERTIMAGEBLOBHERE dalam contoh ini).

Saya menggunakan teknik ini untuk memadukan tekstur tampak wafer dan data gambar lainnya yang diserialisasi dengan standar rgba transparansi / aturan linear gradien css. Bekerja lebih baik daripada melapisi banyak karya seni dan membuang-buang permintaan HTTP yang buruk untuk seluler. Semuanya dimuat sisi klien tanpa operasi file yang diperlukan, tetapi meningkatkan ukuran byte dokumen.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

0

Jika Anda harus mendapatkan gradien dan gambar latar belakang bekerja bersama di IE 9 (HTML 5 & HTML 4.01 Strict), tambahkan deklarasi atribut berikut ke kelas css Anda dan itu harus melakukan trik:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Perhatikan bahwa Anda menggunakan filteratribut dan bahwa ada dua contoh progid:[val]dipisahkan oleh koma sebelum Anda menutup nilai atribut dengan tanda titik koma. Ini biola . Juga perhatikan bahwa ketika Anda melihat biola, gradien melampaui sudut membulat. Saya tidak memiliki perbaikan untuk yang lain tidak menggunakan sudut membulat. Perhatikan juga bahwa ketika menggunakan path relatif dalam atribut src [IMAGE_URL], path relatif ke halaman dokumen dan bukan file css (Lihat sumber ).

Artikel ini ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) adalah yang menuntun saya ke solusi ini. Ini cukup membantu untuk IE-spesifik CSS3.


0

Saya ingin membuat tombol rentang dengan gambar latar belakang, kombinasi gradien latar belakang.

http://enjoycss.com/ membantu melakukan tugas pekerjaan saya. Hanya saya harus menghapus beberapa CSS tambahan yang dibuat secara otomatis. Tapi ini situs yang sangat bagus untuk membangun pekerjaan awal Anda.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

0

Saya menyelesaikan masalah dengan cara itu. Saya mendefinisikan Gradient dalam HTML dan gambar latar belakang di Tubuh

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}


0

Untuk desain responsif saya, panah bawah drop-box saya di sisi kanan kotak (vertikal accordion), diterima persentase sebagai posisi. Awalnya panah bawah adalah "position: absolute; right: 13px;". Dengan pemosisian 97% berfungsi seperti pesona sebagai berikut:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS Maaf, tidak tahu cara menangani filter.


-1

Sebagai cara metode pasti, Anda bisa membuat gambar latar belakang yang mengatakan 500x5 piksel, dalam csspenggunaan Anda :

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Dimana xxxxxx sesuai dengan warna yang cocok dengan warna gradien akhir.

Anda juga bisa memperbaikinya di bagian bawah layar dan menyesuaikannya dengan warna gradien awal.


1
-1 karena: Untuk satu hal, "background-img" bukan aturan CSS yang valid. Untuk yang lain, ini sebenarnya tidak menjawab pertanyaan.
Chris Browne
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.