그라디언트 색상이 인터넷에서 탐색기

StackOverflow https://stackoverflow.com/questions/213750

문제

내가 알고 있는 Internet Explorer 에서는 몇 가지 독자적인 확장을 할 수 있도록 같은 것들을 만들로 div 그라데이션을 배경입니다.내가 기억할 수 없는 요소의 이름이나 그것의 사용합니다.누군가가 몇 가지 예제 또는 링크가?

도움이 되었습니까?

해결책

IE가 처리 할 수있는 사용자 정의 CSS 필터를보십시오http://msdn.microsoft.com/en-us/library/ms532847.aspx

다른 팁

모든 브라우저 그라디언트에 사용하는 코드 :

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;

높이를 지정해야합니다 zoom: 1 적용하려면 hasLayout 이것이 IE에서 작동하는 요소에.

업데이트:

다음은 덜 덜 혼합 된 (CSS) 버전이 있습니다.

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

그만큼 filter 스타일은 IE8 및 IE9에서 작동해야합니다.

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

상당 잡았다에 올 때 그라디언트는 IE 에서만 사용할 수 있습 Microsoft 터를 쉽게 관리 할 수 있습니다.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

그들은... kill 명확한 유형 어떤 텍스트에 의해 덮여집니다.주어진 것을 목적으로의 그라디언트가 정상적으로 만들 UI,더 나아 보이는 마개한다.

그래서 즉 내가 사용하여 반복되는 배경 이미지 대신 합니다.는 경우에는 배경 이미지 css 와 결합된 그라데이션 CSS 위해 다른 브라우저(당으로 Blowsie 의 답변),다른 브라우저를 무시하는 배경 이미지에 찬성하여 그라데이션의 css,그래서 그것은 됩니다만 결국에 적용하는 IE.

background-image: url('/Content/Images/button-gradient.png');

많은 사이트에 사용할 수 있는 빠르게 생성하는데 배경;내가 사용하는 이.

Microsoft의 훌륭한 도구는 색상을 실시간으로 검사하고 모든 브라우저에 대한 CSS를 생성 할 수 있습니다.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%);

이 유용한 링크를 추가 할 것이라고 생각했습니다. http://css3please.com/

모든 브라우저에서 그라디언트가 작동하는 방법을 보여줍니다.

IE10은 다음과 같이 그라디언트를 지원합니다.

background: -ms-linear-gradient(#017ac1, #00bcdf);

scriptfx.com에서 바로 기사: 

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

이 시도:

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

IE 9 그라디언트로 어려움을 겪는 동안 내가 발견 한 두 가지.

  1. 그만큼 -ms-filter 나를 위해 일하지 않았습니다. 나는 간단히 사용해야했다 filter.
  2. 나는 추가해야했다 height: 100% IE가 그라디언트를 사용하기 위해 내 수업에.
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top