Safari에서 선형 그래디언트 어둡게하는 효과를 피하는 방법은 무엇입니까?

Question

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: linear-gradient(top, blue, transparent); 
 
}

<div></div>

크롬 (62)는 렌더링 :

사파리 (11)는 렌더링 :

어떻게 사파리에서이 어두워지는 효과를 피할 것인가?

Answer 1

투명을 rgba 색상 값으로 설정해보십시오. 예 :

background: linear-gradient(top, blue, rgba(0,0,255,0)); 

둘 모두의 RGB 값이 일치해야합니다. 모든

Answer 2

먼저 당신은 후 사용이 background: linear-gradient(to bottom, blue, transparent);해야하므로이 "잘못된 속성"으로 간주됩니다, 다른 사람이 방향 전에 "에"추가 할 필요가 크롬에 , 현재의 구문에 문제가 크로스 브라우저 솔루션 :

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    /* For browsers that do not support gradients */ 
 
    background: blue; 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background: -webkit-linear-gradient(top, blue, transparent); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background: -o-linear-gradient(top, blue, transparent); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background: -moz-linear-gradient(top, blue, transparent); 
 
    /* Standard syntax */ 
 
    background: linear-gradient(to bottom, blue, transparent); 
 
}

<div></div>

당신은 W3schools에서 그라디언트에 대한 자세한 내용을 읽을 수 있습니다.