Câu hỏi Làm thế nào để kết hợp một background-image và CSS3 gradient trên cùng một phần tử?


Làm cách nào để sử dụng CSS3 gradients cho background-color và sau đó áp dụng background-image để áp dụng một số loại kết cấu trong suốt ánh sáng?


1065
2018-03-23 22:30


gốc


lưu ý: bạn cũng có thể định vị hình nền (trung tâm 15px) hoặc đặt thuộc tính 'lặp lại' theo cách này (ví dụ: hoạt động cho Firefox 3.6+) .ome-class {background: url ("../ icon.png") no- lặp lại trung tâm 15px, -moz-linear-gradient (giữa đầu trang, #FFFFFF, #DDDDDD);} - Julien Bérubé
SVG hoặc là SVG + CSS có thể được sử dụng để tạo kết cấu phẳng (nhiễu) hoặc độ dốc kết cấu tương ứng. - Clint Pachl


Các câu trả lời:


Nhiều hình nền!

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

Hai dòng này là dự phòng cho bất kỳ trình duyệt nào không làm gradients.  Xem ghi chú để xếp ảnh chỉ có IE <9 bên dưới.

  • Dòng 1 đặt màu nền phẳng.
  • Dòng 2 đặt dự phòng ảnh nền.

Dòng cuối cùng đặt hình nền và độ dốc cho các trình duyệt có thể xử lý chúng.

  • Dòng 3 dành cho tất cả các trình duyệt tương đối hiện đại.

Gần như tất cả các trình duyệt hiện tại đều hỗ trợ nhiều hình nền và nền css. Xem http://caniuse.com/#feat=css-gradients để hỗ trợ trình duyệt. Để có bài đăng tốt về lý do bạn không cần nhiều tiền tố trình duyệt, hãy xem http://codepen.io/thebabydino/full/pjxVWp/

Ngăn xếp lớp

Cần lưu ý rằng hình ảnh được xác định đầu tiên sẽ ở trên cùng trong ngăn xếp. Trong trường hợp này, hình ảnh nằm trên TOP của gradient.

Để biết thêm thông tin về phân tầng nền, hãy xem http://www.w3.org/TR/css3-background/#layering.

Xếp hình ảnh CHỈ (không có độ dốc trong phần khai báo) Đối với IE <9

IE9 và lên có thể ngăn xếp hình ảnh theo cùng một cách. Bạn có thể sử dụng điều này để tạo ra một hình ảnh gradient cho ie9, mặc dù cá nhân, tôi sẽ không. Tuy nhiên cần lưu ý khi chỉ sử dụng hình ảnh, tức là <9 sẽ bỏ qua tuyên bố dự phòng và không hiển thị bất kỳ hình ảnh nào. Điều này không xảy ra khi một gradient được bao gồm. Để sử dụng một hình ảnh dự phòng duy nhất trong trường hợp này, tôi khuyên bạn nên sử dụng tuyệt vời của Paul Irish Phần tử HTML có điều kiện cùng với mã dự phòng của bạn:

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

Vị trí nền, định cỡ, v.v.

Các thuộc tính khác sẽ áp dụng cho một hình ảnh đơn lẻ cũng có thể được phân cách bằng dấu phẩy. Nếu chỉ có 1 giá trị được cung cấp, giá trị đó sẽ được áp dụng cho tất cả hình ảnh xếp chồng bao gồm cả độ dốc. background-size: 40px; sẽ hạn chế cả hình ảnh và độ dốc đến 40px chiều cao và chiều rộng. Tuy nhiên sử dụng background-size: 40px, cover; sẽ tạo ra hình ảnh 40px và gradient sẽ bao gồm phần tử. Để chỉ áp dụng cài đặt cho một hình ảnh, hãy đặt cài đặt mặc định cho một hình ảnh khác: background-position: 50%, 0 0; hoặc là các trình duyệt hỗ trợ nó sử dụng initial: background-position: 50%, initial;

Bạn cũng có thể sử dụng tốc ký nền, tuy nhiên điều này sẽ loại bỏ màu và hình ảnh dự phòng.

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

Điều tương tự cũng áp dụng cho vị trí nền, lặp lại nền, v.v.


1329
2018-03-30 16:59



Cảm ơn câu trả lời của bạn, bất kỳ ý tưởng nào về cách kiểm soát background-position chỉ cho hình ảnh và không phải là gradient? - adardesign
cảm ơn vì điều này, thông tin tuyệt vời. | @adardesign: sử dụng tốc ký nền. Sửa đổi ví dụ trên, nó sẽ là: background: url (IMAGE_URL) không lặp lại phía trên bên trái, [gradient phù hợp]; - RussellUresti
Điều này là tuyệt vời nhưng không hoạt động trong IE 6-9. Ý tưởng nào? - Zoolander
@adardesign: background: url ("../ images / icon.png") không lặp lại trung tâm 15px, -moz-linear-gradient (giữa đầu trang, #FFFFFF, #DDDDDD); / * thông báo trung tâm 15px, nó sẽ thêm một đệm trái 15px và căn chỉnh theo chiều dọc ở giữa icon.png * / - Julien Bérubé
trong chrome atleast bạn có thể kiểm soát vị trí nền cho nhiều hình ảnh bằng cách sử dụng dấu phẩy để tách các giá trị .. như thế này .. background-position: 0px 8px, 0px 0px ... - Orlando


Nếu bạn cũng muốn đặt vị trí nền cho hình ảnh của bạn, hơn bạn có thể sử dụng điều này:

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

hoặc bạn cũng có thể tạo một mixin LESS (kiểu 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



Người duy nhất trên trang này làm việc cho tôi. Tôi đã sử dụng nó với CSS bình thường. Tất cả những người khác tôi đã thử đã thực sự ẩn hình ảnh với màu gradient lớp phủ. - Ska
@Ska - Chỉ cần đảo ngược thứ tự then.The z-index hoạt động theo cách khác xung quanh đây. Xem stackoverflow.com/questions/14915542/…. - Frank Conijn


Một điều cần nhận ra là hình ảnh nền được xác định đầu tiên là trên cùng trong ngăn xếp. Hình ảnh được xác định cuối cùng sẽ là đáy. Điều đó có nghĩa, để có một gradient nền phía sau một hình ảnh, bạn sẽ cần:

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

Bạn cũng có thể xác định vị trí nền và kích thước nền cho hình ảnh. Tôi đặt cùng một bài đăng trên blog về một số điều thú vị mà bạn có thể làm với CSS3 gradient


39
2017-12-31 23:51



Câu trả lời sẽ tốt hơn nữa, khi ký hiệu tiêu chuẩn W3C xuất hiện ở cuối. - Volker E.
đoạn mã của bạn không hoạt động - redress
Mã này dường như không hoạt động đúng cách. chúng tôi chỉ có thể xem hình ảnh StackOverflow chứ không phải hình nền phía sau / trước hình ảnh đó. - Or A.
Tôi nghĩ rằng -webkit-gradient có thể bị phản đối stackoverflow.com/questions/10683364/… - alpalalpal
Mã có thể không hoạt động nhưng đây là một điểm rất quan trọng. Bạn có thể sắp xếp lại cách các yếu tố nền hoạt động nhưng bạn phải nghĩ về chúng được xếp lớp. Nếu bạn muốn các gradient trên đầu trang của hình ảnh, đặt nó đầu tiên và có thể bạn sẽ muốn chúng tôi RGBa để bạn có thể nhìn thấy hình ảnh phía sau: background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg'); - staypuftman


bạn có thể chỉ cần gõ:

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



Đây là giải pháp duy nhất làm việc cho tôi (Firefox v57). Các linear-gradient() phải đến trước url()và độ trong suốt một phần phải được sử dụng cho các màu gradient, sử dụng rgba(). Bất cứ điều gì khác chỉ đơn giản là sử dụng định nghĩa đầu tiên trên danh sách (như thể thứ hai là một dự phòng, tương tự như cách font-family khai báo). - waldyrious
@waldyrious lưu ý rằng người dùng muốn áp dụng một loại kết cấu trong suốt ánh sáng trên gradient tuyến tính nên hình ảnh phải đến trước vì nó sẽ được hiển thị trên gradient - Alex Guerrero
Việc tổng hợp một hình ảnh và một gradient thông qua bán trong suốt sẽ có tác dụng tương tự bất kể cái nào ở phía trước. Tuy nhiên, bạn luôn có thể xác định độ dốc của mình để có độ trong suốt, nhưng hình ảnh chưa được bán trong suốt không thể chuyển đổi dễ dàng / động được sử dụng theo cách này. Đó là lý do tại sao tôi thấy cách tiếp cận của việc đặt gradient đầu tiên thường hữu ích hơn. - waldyrious


Tôi đã thực hiện một nơi mà tôi cần phải thực hiện kỹ thuật này một bước xa hơn, và muốn phác thảo công việc của tôi. Đoạn mã dưới đây thực hiện tương tự nhưng sử dụng SASS, Bourbon và một hình ảnh.

    @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 và Bourbon chăm sóc mã trình duyệt chéo, và bây giờ tất cả những gì tôi phải khai báo là vị trí sprite trên mỗi nút. Nó rất dễ dàng để mở rộng này chính cho các nút hoạt động và di chuột tiểu bang.


13
2017-10-10 17:08





giải pháp của tôi:

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



Giải pháp này hoạt động trong trường hợp của tôi để hiển thị gradient trên đầu hình ảnh, nếu không nó sẽ bị ẩn bởi hình ảnh. - vizFlux


Tôi luôn sử dụng mã sau để làm cho nó hoạt động. Có một số lưu ý:

  1. Nếu bạn đặt URL hình ảnh trước độ dốc, hình ảnh này sẽ được hiển thị ở trên gradient như mong đợi.

.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. Nếu bạn đặt gradient trước URL hình ảnh, hình ảnh này sẽ được hiển thị Dưới gradient.

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

Kỹ thuật này cũng giống như chúng ta có nhiều hình nền như mô tả đây


8
2017-10-04 07:21





Tôi đã làm một ví dụ với những người yêu thích

enter image description here

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

trong trình biên tập enjoycss, bạn có thể conbine bất kỳ số lượng hình nền nào, tuyến tính, lặp lại-tuyến tính, xuyên tâm, lặp lại xuyên tâm, hình ảnh, màu sắc

bạn điều chỉnh hình nền của mình bằng GUI và nó tự động tạo mã

mã ở đây http://enjoycss.com/5q/code/0/background#background


5
2018-01-12 15:24