Bagaimana cara menggunakan gradien CSS3 untuk saya background-color
dan kemudian menerapkan a background-image
untuk menerapkan semacam tekstur transparan cahaya?
css
background-image
gradient
Ronald
sumber
sumber
Jawaban:
Berbagai latar belakang!
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 terakhir menetapkan gambar latar belakang dan gradien untuk browser yang dapat menanganinya.
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:
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 menggunakanbackground-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 gunakaninitial
:background-position: 50%, initial;
Anda juga dapat menggunakan steno latar belakang, namun ini menghilangkan warna dan gambar mundur.
Hal yang sama berlaku untuk posisi latar belakang, pengulangan latar belakang, dll.
sumber
background-position
hanya untuk gambar dan bukan gradien?Jika Anda juga ingin mengatur posisi latar belakang untuk gambar Anda, Anda dapat menggunakan ini:
atau Anda juga dapat membuat mixin KURANG (gaya bootstrap):
sumber
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:
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
sumber
background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
Anda cukup mengetik:
sumber
linear-gradient()
harus datang sebelumurl()
, dan transparansi parsial telah digunakan untuk warna gradien, menggunakanrgba()
. Apa pun yang lain hanya menggunakan definisi pertama pada daftar (seolah-olah yang kedua adalah mundur, mirip dengan carafont-family
kerja deklarasi).Saya selalu menggunakan kode berikut untuk membuatnya berfungsi. Ada beberapa catatan:
Teknik ini sama seperti kita memiliki beberapa gambar latar belakang seperti yang dijelaskan di sini
sumber
solusi saya:
sumber
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.
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.
sumber
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 ):
sumber
Ini adalah MIXIN yang saya buat untuk menangani semua hal yang mungkin ingin digunakan orang:
Ini bisa digunakan seperti:
Semoga kalian menemukan ini bermanfaat.
kredit ke @Gidgidonihah untuk menemukan solusi awal.
sumber
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
sumber
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.
sumber
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:
Perhatikan bahwa Anda menggunakan
filter
atribut dan bahwa ada dua contohprogid:[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.
sumber
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.
sumber
Saya menyelesaikan masalah dengan cara itu. Saya mendefinisikan Gradient dalam HTML dan gambar latar belakang di Tubuh
sumber
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:
PS Maaf, tidak tahu cara menangani filter.
sumber
Sebagai cara metode pasti, Anda bisa membuat gambar latar belakang yang mengatakan 500x5 piksel, dalam
css
penggunaan Anda :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.
sumber