Độ dốc CSS trên nhiều phần tử

Question

Tôi đã tự hỏi liệu có thể áp dụng một nền CSS3 đơn lẻ cho nhiều phần tử hay không. Nói cách khác, gradient kéo dài qua phần tử cha nhưng chỉ hiển thị bên trong các phần tử con.

Sau khi tìm kiếm, tôi thấy chủ đề này: Applying gradient over multiple views

Đây chính là vấn đề của tôi, mặc dù tôi cần nó như CSS/HTML mã.

Để hình dung được vấn đề, tôi đã thực hiện hai hình ảnh:

Đây là thiết lập cơ bản. Hai <div> s cần một nền gradient nằm bên trong phần tử <div> lớn hơn.

Như bạn có thể thấy, các gradient trong hình ảnh thứ hai perfecly mất dần từ yếu tố A đến yếu tố B. Hiệu ứng này có thể dễ dàng thực hiện được trong hầu hết các chương trình chỉnh sửa ảnh, vì vậy tôi chỉ có thể sử dụng một hình ảnh thích hợp để có được hiệu quả mong muốn.

Tuy nhiên, vì hình ảnh có lẽ không phải là cách tốt nhất để giải quyết vấn đề này, tôi hy vọng sẽ tìm thấy câu trả lời ở đây về cách thực hiện điều này chỉ với CSS. Tôi đã sử dụng gradient trước đây, nhưng tôi vẫn chưa tìm được giải pháp cho vấn đề này.

Mọi trợ giúp đều được đánh giá cao.

EDIT (06/01/15 13:30 GMT + 1): Các yếu tố A và B sẽ có thể có các góc tròn. Độ dốc bao trùm ban đầu được cho là radial-gradient, nhưng không nhất thiết phải như vậy. Có thể vấn đề thực sự không thể giải quyết được.

Answer 1

Demo:https://jsfiddle.net/andrewgu/gptbyejt/

Một cách để thực hiện điều này là bạn có thể luôn luôn giả nó với một màu nền tảng vững chắc. Bạn hiển thị gradient div dưới nền và bất kỳ nội dung nào theo số div mà bạn muốn, được phân tách bằng lớp phủ div có màu phù hợp với nền.

Ưu điểm: linh hoạt, tương thích

Nhược điểm: màu nền rắn chỉ

---

Một cách khác là sử dụng một cái gì đó gọi là CSS clipping. Bạn có thể thực hiện việc này bằng cách sử dụng các khai báo CSS của clip-path và -webkit-clip-path. Điều này về cơ bản làm cho một phần của một phần tử trong suốt. Tuy nhiên, bạn cần xác định kích thước của từng phần tử trước và tinh chỉnh nó một chút để hiển thị các mục để hiển thị chính xác. Phương pháp này hoạt động với nền không phải là rắn. Trái với niềm tin phổ biến, CSS clipping khá tốt với tính tương thích giữa các trình duyệt.

Ưu điểm: nền Khuôn mẫu, tương thích

Nhược điểm: Defined kích thước phần tử con, tinh chỉnh

Answer 2

Sự kết hợp của background-attachment: fixed và iframe có thể làm thủ thuật này cho bạn.
Kiểm tra nexts.github.io/Multiple.js và chú ý đến "Làm thế nào nó hoạt động" phần

Answer 3

(Thậm chí nếu qestion này khá rất cũ ...)

Có một cái nhìn tại Multiple.js - trong đó mô tả làm thế nào để áp dụng một gradient thành nhiều phần tử không có js.

Phần trích dẫn từ trang demo:

.selector { 
    background-image: linear-gradient(white, black); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; /* <- here it is */ 
    width: 100px; 
    height: 100px; 
} 

background-attachment: fixed mở rộng nền kích thước và hiển thị khung nhìn trong mọi phần tử đoạn thích hợp, chính xác những gì là cần thiết!

Ý tưởng đằng sau điều này đơn giản như thông minh và hoạt động cho hầu hết các trình duyệt hiện đại (IE8).

nếu áp dụng nó trông giống như này: