RGBA는 매우 재미있다, 그래서이다 -webkit-gradient, -moz-gradient그리고 어 … progid:DXImageTransform.Microsoft.gradient… 그래. 🙂
RGBA와 그라디언트를 결합하여 현재 / 최신 CSS 사양을 사용하여 알파 투명도의 그라디언트를 결합하는 방법이 있습니까?
답변
예. 웹킷 및 moz 그라디언트 선언 모두에서 rgba를 사용할 수 있습니다.
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);( src )
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);( src )
분명히 “확장 된 16 진”구문을 사용하여 IE에서도이를 수행 할 수 있습니다. 첫 번째 쌍 (예 55)은 불투명도 레벨을 나타냅니다.
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);( src )
답변
모든 최신 브라우저 (Chrome 26, Opera 12.1, IE 10 및 Firefox 16에서 시작)에서 새 구문 이 잠시 동안 지원되었습니다. http://caniuse.com/#feat=css-gradients
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));이렇게하면 맨 위에서 검은 색에서 시작하여 맨 아래에서 완전히 투명하게 그라디언트가 렌더링됩니다.
답변
이것은 정말 멋진 것들입니다! 나는 거의 똑같이 필요했지만 흰색에서 투명으로의 수평 그라디언트가 필요했습니다. 그리고 그것은 잘 작동하고 있습니다! 내 코드는 다음과 같습니다.
.gradient{
/* webkit example */
background-image: -webkit-gradient(
linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
to(rgba(255, 255, 255, 0))
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
right center,
rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
);
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColorStr=#FFFFFF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColoStr=#FFFFFF
);
}답변
내 코드는 다음과 같습니다.
background: #e8e3e3; /* Old browsers */
background: -moz-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */답변
#grad
{
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}나는 w3schools에서 이것을 발견하고 그라디언트와 투명성을 찾고있는 동안 내 요구에 적합했습니다. w3schools를 가리키는 링크를 제공하고 있습니다. 그라디언트 및 투명도를 찾고 있다면 도움이되기를 바랍니다.
http://www.w3schools.com/css/css3_gradients.asp
또한 w3schools에서 링크를 붙여 넣는 불투명도를 변경하여 확인했습니다.
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans
도움이 되길 바랍니다.
답변
다음은 동일한 색상에 대해 완전히 불투명 (위)에서 투명도 (아래)의 20 %까지 세로 그라디언트 를 생성하는 데 사용하는 것 입니다.
background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */답변
방금이 예를 보았습니다. 가장 최근의 예제를 단순화하고 사용하기 위해 CSS에 ‘grad’의 선택기 클래스를 제공합니다 (이전 버전과의 호환성을 포함했습니다)
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}에서
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
