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


Bagaimana cara menggunakan gradien CSS3 untuk saya background-color dan kemudian menerapkan background-image untuk menerapkan semacam tekstur transparan ringan?


1063
2018-03-23 22:30


asal


Jawaban:


Beberapa 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 fallback untuk browser apa pun yang tidak melakukan gradien.  Lihat catatan untuk menumpuk gambar hanya IE <9 di bawah ini.

  • Jalur 1 menetapkan warna latar belakang yang datar.
  • Baris 2 mengatur penggantian 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 beberapa gambar latar belakang dan latar belakang css. Lihat http://caniuse.com/#feat=css-gradients untuk dukungan browser. Untuk pos yang bagus tentang mengapa Anda tidak memerlukan banyak awalan browser, lihat http://codepen.io/thebabydino/full/pjxVWp/

Lapisan Stack

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

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

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

IE9 dan Facebook dapat menumpuk gambar dengan cara yang sama. Anda dapat menggunakan ini untuk membuat gambar gradien untuk IE9, meskipun secara pribadi, saya tidak akan. Namun perlu dicatat ketika hanya menggunakan gambar, yaitu <9 akan mengabaikan pernyataan fallback dan tidak menampilkan gambar apa pun. Ini tidak terjadi ketika gradien disertakan. Untuk menggunakan gambar fallback tunggal dalam hal ini saya sarankan menggunakan indah Paul Irlandia Elemen HTML bersyarat 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 koma. Jika hanya 1 nilai yang diberikan, itu akan diterapkan ke semua gambar yang ditumpuk termasuk gradien. background-size: 40px; akan membatasi baik gambar maupun 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 menggunakan initial: background-position: 50%, initial;

Anda juga dapat menggunakan singkatan 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 latar belakang-posisi, latar belakang-ulang, dll.


1327
2018-03-30 16:59



Jika Anda juga ingin mengatur posisi latar belakang 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 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
    }
}

75
2017-11-24 16:02



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

  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 latar belakang dan ukuran latar belakang untuk gambar. Saya menyusun posting blog tentang beberapa hal menarik yang dapat Anda lakukan Gradien CSS3


39
2017-12-31 23:51



Anda cukup mengetik:

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


16
2017-12-21 18:35



Saya memiliki implementasi di mana saya perlu mengambil teknik ini selangkah lebih jauh, dan ingin menguraikan pekerjaan saya. Kode di bawah ini 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 silang, dan sekarang yang harus saya nyatakan adalah posisi sprite per tombol. Sangat mudah untuk memperpanjang prinsip ini untuk tombol aktif dan melayang-layang negara.


13
2017-10-10 17:08



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

13
2018-03-15 12:39



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

  1. Jika Anda menempatkan URL gambar sebelum gradien, gambar ini akan ditampilkan 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 dibawah 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 kami memiliki banyak gambar latar belakang seperti yang dijelaskan sini


8
2017-10-04 07:21



Saya membuat contoh dengan enjoycss

enter image description here

http://enjoycss.com/5q#background

di editor enjoycss Anda dapat mem-conbine sejumlah latar belakang, linear, pengulangan-linear, radial, pengulangan-radial, gambar, warna

Anda menyesuaikan latar belakang Anda dengan GUI dan secara otomatis menghasilkan kode

kode ada di sini http://enjoycss.com/5q/code/0/background#background


5
2018-01-12 15:24



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

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

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

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


2
2018-02-06 04:20



Berikut ini adalah MIXIN yang saya buat untuk menangani semua hal yang mungkin ingin digunakan oleh orang-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 ini:

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


2
2017-12-11 10:33