Bagaimana cara menggunakan CSS3 gradien untuk background-color
dan kemudian menerapkan background-image
untuk menerapkan semacam cahaya tekstur transparan?
Beberapa latar belakang!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Ini 2 garis mundur untuk setiap browser yang doesn't melakukan gradien. Lihat catatan untuk susun gambar hanya IE < 9 di bawah ini.
Garis akhir set gambar latar belakang dan gradien untuk browser yang dapat menangani mereka.
Hampir semua browser yang ada saat ini memiliki dukungan untuk beberapa latar belakang gambar dan css latar belakang. Lihat http://caniuse.com/#feat=css-gradients untuk dukungan browser. Untuk posting yang baik tentang mengapa anda don't perlu beberapa browser awalan, lihat http://codepen.io/thebabydino/full/pjxVWp/
Layer Stack
Perlu dicatat bahwa yang pertama kali didefinisikan gambar akan berada paling atas di tumpukan. Dalam kasus ini, gambar di ATAS gradien.
Untuk informasi lebih lanjut tentang latar belakang layering melihat http://www.w3.org/TR/css3-background/#layering.
Susun gambar SAJA (tidak ada gradien dalam deklarasi) Untuk IE < 9
IE9 dan dapat stack gambar ini dengan cara yang sama. Anda bisa menggunakan ini untuk membuat gradien gambar untuk ie9, meskipun secara pribadi, saya tidak't. Namun perlu dicatat ketika hanya menggunakan gambar, yaitu < 9 akan mengabaikan pernyataan mundur dan tidak menampilkan gambar apapun. Hal ini tidak terjadi ketika gradien disertakan. Untuk menggunakan satu gambar fallback dalam kasus ini saya sarankan menggunakan Paulus Irlandia's indah Bersyarat elemen HTML bersama dengan kode mundur:
.lte9 #target{ background-image: url("IMAGE_URL"); }
Latar belakang posisi, ukuran dll.
Sifat-sifat lainnya yang akan berlaku untuk satu gambar juga dapat dipisahkan koma. Jika hanya 1 nilai yang diberikan, yang akan diterapkan untuk semua ditumpuk gambar termasuk gradien. background-size: 40px;
akan membatasi kedua gambar dan gradien untuk 40px tinggi dan lebar. Namun menggunakan background-size: 40px, penutup;
akan membuat gambar 40px dan gradien akan mencakup elemen. Untuk hanya menerapkan pengaturan untuk satu gambar, mengatur default untuk yang lain: background-position: 50%, 0 0;
atau untuk browser yang mendukung itu menggunakan awal
: background-position: 50%, initial;
Anda juga dapat menggunakan latar belakang singkat, namun hal ini menghilangkan fallback warna dan gambar.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
Hal yang sama berlaku untuk latar belakang-posisi, background-repeat, dll.
Jika anda juga ingin mengatur latar belakang posisi untuk gambar anda, daripada 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 KURANG mixin (bootstrap style):
#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 yang pertama kali didefinisikan latar belakang gambar yang paling atas di tumpukan. Terakhir didefinisikan gambar akan berada paling bawah. Artinya, untuk memiliki latar belakang gradien belakang gambar, anda akan 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 bisa menentukan posisi dan latar belakang latar belakang untuk ukuran gambar. Saya menyusun posting blog tentang beberapa hal menarik yang dapat anda lakukan dengan CSS3 gradien
Saya selalu menggunakan kode berikut untuk membuatnya bekerja. Ada beberapa catatan:
.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>
.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 saja seperti kita memiliki beberapa gambar latar belakang yang menggambarkan di sini
Aku punya sebuah implementasi di mana aku harus mengambil teknik ini satu langkah lebih jauh, dan ingin garis besar pekerjaan saya. Kode di bawah ini melakukan hal yang sama tetapi menggunakan SASS, Bourbon, dan gambar sprite.
@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 cross browser kode, dan sekarang semua saya harus menyatakan apakah sprite posisi per tombol. Hal ini mudah untuk memperpanjang ini kepala sekolah untuk tombol aktif dan melayang-layang serikat.
Berikut ini adalah MIXIN yang saya buat untuk menangani segala sesuatu yang orang mungkin ingin menggunakan:
.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 */
}
Hal ini dapat digunakan seperti:
.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);
Harap kalian menemukan ini bermanfaat.
kredit untuk @Gidgidonihah untuk mencari solusi awal.
Jika anda memiliki kesalahan aneh dengan men-download latar belakang foto menggunakan W3C Link checker: https://validator.w3.org/checklink
Berikut ini adalah modern mixin yang saya gunakan (kredit: PSA: don't menggunakan gradient generator):
.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);
}
Saya mencoba untuk melakukan hal yang sama. Sementara warna latar belakang dan latar belakang-gambar yang ada pada lapisan yang terpisah dalam sebuah benda-yang berarti mereka dapat hidup berdampingan -- CSS gradien tampaknya co-opt-gambar latar belakang layer.
Dari apa yang saya dapat katakan, border-image tampaknya memiliki dukungan yang lebih luas dari beberapa latar belakang, jadi mungkin itu's pendekatan alternatif.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: sedikit penelitian lebih lanjut. Tampaknya Petra Gregorova memiliki sesuatu bekerja di sini --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html
Jika anda ingin gambar yang akan benar-benar menyatu bersama-sama di mana itu doesn't terlihat seperti unsur-unsur beban secara terpisah karena terpisah permintaan HTTP kemudian menggunakan teknik ini. Di sini kami're memuat dua hal pada satu unsur yang sama yang memuat secara bersamaan...pastikan anda mengkonversi pra-diberikan 32-bit gambar png transparan/tekstur untuk base64 string pertama dan menggunakannya dalam latar belakang-gambar css panggilan (di tempat INSERTIMAGEBLOBHERE dalam contoh ini). Saya menggunakan teknik ini untuk sekering wafer mencari tekstur dan lain-lain data gambar yang's serial dengan standar rgba transparansi / linear gradient css rule. Karya-karya yang lebih baik dari layering beberapa seni dan membuang-buang permintaan HTTP yang buruk untuk mobile. Semuanya dimuat sisi klien dengan operasi file yang diperlukan, tetapi tidak meningkatkan dokumen ukuran byte.
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");
}
Saya ingin membuat rentang tombol dengan gambar latar belakang, latar belakang gradien kombinasi.
http://enjoycss.com/ membantu untuk melakukan tugas pekerjaan. Hanya saya harus menghapus beberapa auto generated CSS tambahan. Tapi itu's benar-benar baik membangun situs awal anda bekerja.
#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. Aku tentukan Gradien dalam HTML dan gambar latar belakang dalam 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 drop-box panah ke bawah di sisi kanan kotak (vertical accordion), diterima sebagai persentase posisi. Awalnya panah bawah adalah "position: absolute; kanan: 13px;". Dengan 97% posisi itu bekerja 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 );
P. S. Maaf, don't tahu bagaimana untuk menangani filter.
Jika anda memiliki untuk mendapatkan gradien dan gambar latar belakang bekerja bersama-sama di IE 9 (HTML 5 & HTML 4.01 Strict), tambahkan kode berikut atribut deklarasi untuk kelas css 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 filter
atribut dan bahwa ada dua contoh dari progid:[val]
dipisahkan oleh koma sebelum anda menutup nilai atribut dengan tanda titik koma. Berikut ini's [biola][1]. Juga perhatikan bahwa ketika anda melihat biola gradien melampaui sudut-sudut membulat. Saya don't memiliki perbaikan untuk yang lain tidak menggunakan sudut-sudut membulat. Juga perhatikan bahwa bila menggunakan path relatif dalam src [IMAGE_URL] atribut, path relatif ke halaman dokumen dan file css (Lihat sumber).
Artikel ini (http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) adalah apa yang menyebabkan saya untuk solusi ini. It's cukup membantu untuk IE-spesifik CSS3.
Sebagai metode yang pasti, anda hanya dapat membuat gambar latar belakang yang mengatakan 500x5 piksel, anda css
gunakan:
background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;
Di mana xxxxxx
sesuai dengan warna yang cocok final warna gradien.
Anda juga bisa memperbaiki hal ini ke bagian bawah layar dan memiliki pertandingan awal gradien warna.