Tôi biết rằng Internet Explorer có một số tiện ích mở rộng độc quyền để bạn có thể thực hiện những việc như tạo các div có nền gradient. Tôi không thể nhớ tên thành phần hoặc sử dụng nó. Có ai có một số ví dụ hoặc liên kết?Màu nền trong Internet Explorer
Nhìn vào CSS tùy chỉnh bộ lọc IE có thể xử lý http://msdn.microsoft.com/en-us/library/ms532847.aspx
Ngay từ ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
Phong cách filter nên làm việc cho IE8 và IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
Điều này không hoạt động – Webnet
Code tôi sử dụng cho tất cả các gradient trình duyệt:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
Bạn sẽ cần phải xác định một chiều cao hoặc zoom: 1 để áp dụng hasLayout vào yếu tố này để làm việc trong IE.
Cập nhật:
Đây là một LESS Mixin (CSS) phiên bản cho tất cả các bạn sử dụng LESS ngoài kia:
.gradient(@start, @end) {
background: mix(@start, @end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -webkit-linear-gradient(@start, @end);
background: -moz-linear-gradient(top, @start, @end);
background: -ms-linear-gradient(@start, @end);
background: -o-linear-gradient(@start, @end);
background: linear-gradient(@start, @end);
zoom: 1;
}
Đoạn mã hoàn hảo cho gradient. zoom: 1 là chìa khóa để trả lời câu hỏi này. – Voltin
@Blowsie Tôi gặp sự cố với gradient khi được sử dụng kết hợp với bán kính đường viền. Trong đó nền hiệu quả hình vuông ra khỏi các góc. Rõ ràng là phụ thuộc vào phạm vi màu được chọn nền lấp đầy các góc. Có một thủ thuật để xử lý bán kính biên giới và một gradient nền trong IE? – codepuppy
@codepuppy Đây là lỗi đã biết không có giải pháp, các khung công tác lớn như bootstrap đã chọn bán kính đường viền không có độ dốc. – Blowsie
Chỉ cần nghĩ rằng tôi muốn thêm liên kết này hữu ích: http://css3please.com/
Hiển thị cách nhận gradient làm việc trong tất cả các trình duyệt.
Hãy thử điều này:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
IE5? Oh xin vui lòng không – Ryan
Lưu ý rằng IE10 sẽ hỗ trợ gradient như sau:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Một Gotcha quan trọng khi nói đến gradient trong IE là mặc dù bạn có thể sử dụng bộ lọc của Microsoft .. .
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
... họ tiêu diệt loại rõ ràng trên bất kỳ văn bản nào được bao phủ bởi độ dốc. Do mục đích của gradient là bình thường để làm cho giao diện người dùng trông tốt hơn, đó là một stopper hiển thị cho tôi.
Vì vậy, đối với IE, tôi sử dụng hình nền lặp lại thay thế. Nếu css hình nền được kết hợp với CSS gradient cho các trình duyệt khác (theo câu trả lời của Blowsie), các trình duyệt khác sẽ bỏ qua ảnh nền có lợi cho gradient css, vì vậy nó sẽ chỉ kết thúc áp dụng cho IE.
background-image: url('/Content/Images/button-gradient.png');
Có rất nhiều trang web bạn có thể sử dụng để tạo nhanh nền gradient; Tôi sử dụng this.
Công cụ tuyệt vời từ Microsoft, cho phép bạn kiểm tra màu sắc theo thời gian thực và tạo CSS cho tất cả các trình duyệt: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
Hai điều tôi phát hiện ra trong khi đấu tranh với IE 9 gradient.
-ms-filter không hoạt động đối với tôi. Tôi đã phải sử dụng chỉ đơn giản là filter.height: 100% vào lớp của mình để IE sử dụng độ dốc.bạn có thể muốn kiểm tra [CSS3Pie] (http://css3pie.com/), là một kịch bản cho IE để thêm hỗ trợ cho một số tính năng CSS bao gồm gradient. Nó cũng hoạt động trong IE9. – Spudley
Một lưu ý nhỏ: Tôi đã tìm thấy một lỗi nhỏ khi làm việc trên IE9. Nếu bạn không đánh vần toàn bộ màu HEX, nó sẽ không hoạt động chính xác. tức là #cccccc NOT #ccc Hy vọng điều này sẽ hữu ích. –
Hãy cẩn thận khi áp dụng gradient cho các hàng trong bảng. IE dường như đối xử với những người khác nhau, do đó, để có được bất kỳ giải pháp nào khác cho câu hỏi này để làm việc, bạn sẽ cần phải bọc nội dung của bạn trong một div và áp dụng gradient cho điều đó. – Keith
Tôi tin rằng bạn đang tìm kiếm [thiết lập CSS cụ thể này] (http://msdn.microsoft.com/en-us/library/ms532997.aspx). – tsilb