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

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

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.

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

Anda cukup mengetik:

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

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>

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

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

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.

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

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.

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

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

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.

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

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

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.

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.