6
Tôi sử dụng thanh có hình vuông xoay làm dấu phân cách trên trang web của mình.gradient nền & xoay tạo lớp phủ lạ
Màu nền là độ dốc và cố định, do đó, nó tạo hiệu ứng cuộn đẹp mắt, nhưng khi div xoay đạt đến đỉnh cổng xem, lớp phủ gradient lạ xuất hiện.
Chỉ cần nhìn vào nó (bạn cần phải di chuyển chậm chạp cho đến khi tách đạt đến đỉnh của chế độ xem cổng): http://jsfiddle.net/nff2fjf7/4/
body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle {
width:40px;
height:40px;
display: inline-block;
margin: 10px 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
}<body>
<div class="seperator">
<div class="triangle"></div>
</div>
</body>
Nếu bạn di chuyển trang, gradient thay đổi màu sắc. Đó là những gì 'background-attachment: fixed' là cho. Tôi sửa đổi fiddle một chút. [Có một cái nhìn tại fiddle này] (http://jsfiddle.net/6r0b0b2z/) và bạn có thể thấy sự thay đổi màu sắc khi cuộn. – misterManSam
Tôi có thể cho bạn biết lý do tại sao nó xảy ra, nhưng tôi không có ý tưởng làm thế nào để "đúng" sửa chữa nó vào lúc này. Bạn nhận được hành vi này bởi vì hình vuông xoay của bạn đi vào tọa độ màn hình tiêu cực và nó được màu sắc tính toán lại từ đầu ban đầu, không phải màu được xoay. Khi hình vuông rời khỏi màn hình phần vô hình của hình vuông (hoặc phần có thể là vô hình nếu nó không được xoay) hoạt động như thể nó được vẽ ở phía đối diện. Vì vậy, nếu bạn đặt hình vuông của bạn ở phía trên cùng của màn hình để nó là hầu như không nhìn thấy phần vô hình sẽ hành động như thể nó là ở dưới cùng của màn hình và ngược lại. – Zero
Nếu di chuyển hình vuông đến tận đáy, bạn sẽ thấy hành vi tương tự. – Zero