Làm cách nào để kết hợp một ảnh nền và gradient CSS3 trên cùng một phần tử?

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

Nhiều 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 tạo độ dốc. Xem ghi chú để xếp hình ảnh chỉ IE <9 bên dưới.

• Dòng 1 đặt màu nền phẳng.
• Dòng 2 đặt dự phòng hình ả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à hình nền css. Xem http://caniuse.com/#feat=css-gradrons để được hỗ trợ trình duyệt. Để có một bài viết hay về lý do tại sao bạn không cần nhiều tiền tố trình duyệt, hãy xem http://codepen.io/thebabydino/full/pjxVWp/

Lớp ngăn xếp

Cần lưu ý rằng hình ảnh được xác định đầu tiên sẽ là 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 lớp nền, hãy xem http://www.w3.org/TR/css3-background/#layering .

Xếp chồng hình ảnh CHỈ (không có độ dốc trong khai báo) Dành cho IE <9

IE9 trở lên có thể xếp chồng hình ảnh theo cách tương tự. Bạn có thể sử dụng điều này để tạo một hình ảnh gradient cho eg9, mặc dù về mặt 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 câu lệnh 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 bao gồm một gradient. Để 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 phần tử HTML có điều kiện tuyệt vời của Paul Irish cùng với mã dự phòng của bạn:

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

Vị trí nền, kích thước vv

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

Nếu bạn cũng muốn đặt vị trí nền cho hình ảnh của mình, bạn có thể sử dụng vị trí 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
    }
}

Một điều cần nhận ra là hì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 là, để có một gradient nền phía sau 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ập hợp một bài đăng trên blog về một số điều thú vị bạn có thể làm với độ dốc CSS3

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

Tôi luôn sử dụng đoạn 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 độ dốc 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>

2. 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 giống như chúng ta có nhiều hình nền như mô tả ở đây

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

Tôi đã có một triển khai trong đó 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 điều tương tự nhưng sử dụng SASS, Bourbon và sprite 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 đảm nhiệm 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. Thật dễ dàng để mở rộng hiệu trưởng này cho các nút hoạt động và trạng thái di chuột.

Nếu bạn gặp lỗi lạ khi tải xuống ảnh nền, hãy sử dụng trình kiểm tra Liên kết W3C: https://validator.w3.org/checklink

Dưới đây là các mixin hiện đại mà tôi sử dụng (tín dụng: PSA: không sử dụng trình tạo độ dốc ):

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

Đây là một MIXIN mà tôi đã tạo để xử lý mọi thứ mà mọi người có thể muốn sử dụng:

.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 */
}

Điều này có thể được sử dụng như vậy:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Hy vọng các bạn tìm thấy điều này hữu ích.

tín dụng cho @Gidgidonihah để tìm giải pháp ban đầu.

Tôi đã cố gắng làm điều tương tự. Trong khi màu nền và hình nền tồn tại trên các lớp riêng biệt trong một đối tượng - có nghĩa là chúng có thể cùng tồn tại - các gradient CSS dường như đồng chọn lớp nền hình ảnh.

Từ những gì tôi có thể nói, hình ảnh viền dường như có sự hỗ trợ rộng hơn nhiều nền, vì vậy có lẽ đó là một cách tiếp cận khác.

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

CẬP NHẬT: Nghiên cứu thêm một chút. Có vẻ như Petra Gregorova có một cái gì đó hoạt động ở đây -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

Bạn có thể sử dụng nhiều nền: linear-gradient (); gọi, nhưng hãy thử điều này:

Nếu bạn muốn các hình ảnh được hợp nhất hoàn toàn với nhau, nơi nó trông không giống như các phần tử được tải riêng do các yêu cầu HTTP riêng biệt thì hãy sử dụng kỹ thuật này. Ở đây chúng tôi đang tải hai thứ trên cùng một phần tử tải đồng thời ...

Chỉ cần đảm bảo rằng bạn chuyển đổi hình ảnh / kết cấu png trong suốt 32 bit được kết xuất trước thành chuỗi base64 trước và sử dụng nó trong cuộc gọi css hình ảnh nền (thay cho INSERTIMAGEBLOBHERE trong ví dụ này).

Tôi đã sử dụng kỹ thuật này để hợp nhất một kết cấu tìm kiếm wafer và dữ liệu hình ảnh khác được tuần tự hóa với quy tắc css độ trong suốt / độ dốc tuyến tính rgba tiêu chuẩn. Hoạt động tốt hơn so với phân lớp nhiều nghệ thuật và lãng phí các yêu cầu HTTP có hại cho thiết bị di động. Mọi thứ đều được tải phía máy khách mà không cần thao tác tệp, nhưng làm tăng kích thước byte tài liệu.

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

Nếu bạn phải để độ dốc và hình ảnh nền hoạt động cùng nhau trong IE 9 (HTML 5 & HTML 4.01 Strict), hãy thêm khai báo thuộc tính sau vào lớp css của bạn và nó sẽ thực hiện thủ thuật:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Lưu ý rằng bạn sử dụng filterthuộc tính và có hai trường hợp được progid:[val]phân tách bằng dấu phẩy trước khi bạn đóng giá trị thuộc tính bằng dấu chấm phẩy. Đây là câu đố . Cũng lưu ý rằng khi bạn nhìn vào fiddle, độ dốc vượt ra ngoài các góc tròn. Tôi không có cách khắc phục cho việc khác không sử dụng các góc tròn. Cũng lưu ý rằng khi sử dụng đường dẫn tương đối trong thuộc tính src [IMAGE_URL], đường dẫn này có liên quan đến trang tài liệu chứ không phải tệp css (Xem nguồn ).

Bài viết này ( http://coding.smashingmagazine.com/2010/04/11/css3-solutions-for-iNET-explorer/ ) là những gì dẫn tôi đến giải pháp này. Nó khá hữu ích cho CSS3 dành riêng cho IE.

Tôi muốn tạo nút span với hình nền, kết hợp độ dốc nền.

http://enjoycss.com/ đã giúp thực hiện nhiệm vụ công việc của tôi. Chỉ có tôi phải loại bỏ một số CSS bổ sung được tạo tự động. Nhưng đó là trang web thực sự tốt đẹp xây dựng công việc đầu của bạn.

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

Tôi giải quyết vấn đề theo cách đó. Tôi xác định Gradient trong HTML và hình nền trong Body

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

Đối với thiết kế đáp ứng của tôi, mũi tên thả xuống của tôi ở bên phải của hộp (accordion dọc), tỷ lệ được chấp nhận là vị trí. Ban đầu mũi tên xuống là "vị trí: tuyệt đối; phải: 13px;". Với định vị 97%, nó hoạt động như bùa mê như sau:

> 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 Xin lỗi, không biết cách xử lý các bộ lọc.

Theo một phương pháp chắc chắn, bạn chỉ có thể tạo một hình nền có kích thước 500x5 pixel, theo cách csssử dụng của bạn :

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Ở đâu xxxxxx tương ứng với màu phù hợp với màu gradient cuối cùng.

Bạn cũng có thể sửa lỗi này xuống phía dưới màn hình và để nó khớp với màu gradient ban đầu.