Độ trong suốt của CSS3 + Gradient

RGBA là cực kỳ thú vị, và như vậy là -webkit-gradient, -moz-gradientvà uh ... progid:DXImageTransform.Microsoft.gradient... yeah. :)

Có cách nào để kết hợp cả hai, RGBA và độ dốc, để có độ dốc trong suốt alpha bằng cách sử dụng thông số CSS hiện tại / mới nhất.

Đúng. Bạn có thể sử dụng rgba trong cả khai báo webkit và moz:

/* 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 )

Rõ ràng bạn thậm chí có thể làm điều này trong IE, sử dụng cú pháp "hex mở rộng" kỳ lạ. Cặp đầu tiên (trong ví dụ 55) đề cập đến mức độ mờ đục:

/* 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 )

Cú pháp mới đã được hỗ trợ trong một thời gian bởi tất cả các trình duyệt hiện đại (bắt đầu từ Chrome 26, Opera 12.1, IE 10 và Firefox 16): http://caniuse.com/#feat=css-gradrons

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

Điều này làm cho một gradient, bắt đầu từ màu đen đặc ở phía trên, đến hoàn toàn trong suốt ở phía dưới.

Tài liệu về MDN .

Đây là một số thứ thực sự mát mẻ! Tôi cần khá nhiều như nhau, nhưng với độ dốc ngang từ trắng đến trong suốt. Và nó đang hoạt động tốt! Đây là mã của tôi:

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

Đây là mã của tôi:

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*/
}

Tôi đã tìm thấy điều này trong w3schools và phù hợp với nhu cầu của tôi trong khi tôi đang tìm kiếm độ dốc và độ trong suốt. Tôi đang cung cấp các liên kết để tham khảo w3schools. Hy vọng điều này sẽ giúp nếu bất kỳ ai đang tìm kiếm độ dốc và độ trong suốt.

http://www.w3schools.com/css/css3_gradrons.asp

Ngoài ra tôi đã thử nó trong w3schools để thay đổi độ mờ dán liên kết cho nó kiểm tra nó

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Hy vọng nó giúp.

Sau đây là cái mà tôi đang sử dụng để tạo độ dốc dọc từ mờ hoàn toàn (trên cùng) đến 20% trong suốt (dưới cùng) cho cùng một màu:

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

Tôi chỉ đi qua ví dụ gần đây hơn này. Để đơn giản hóa và sử dụng các ví dụ gần đây nhất, cung cấp cho css một lớp chọn là 'grad', (Tôi đã bao gồm tính tương thích ngược)

.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 */
}

từ https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient