Màu trắng đến độ trong suốt với hình nền

Question

Tôi cần phải áp dụng một màu trắng để minh bạch gradient bao gồm khoảng một phần tư của đầu trang và một hình ảnh nền có thể nhìn thấy cho phần còn lại của trang.

Im tìm cách để đạt được một sự pha trộn liền mạch từ một gradient đến một hình ảnh kết cấu và để làm điều này trong CSS3.

Answer 1

Tôi khuyên bạn nên Ultimate CSS Gradient Generator - ColorZilla.com

Đây là công cụ được thiết kế tốt và có cài đặt sẵn màu trắng trong suốt.

Mã CSS mà nó tạo ra một gradient trắng sang trong suốt là thế này:

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); /* IE6-9 */ 

Answer 2

Tôi thích sử dụng một công cụ cho hệ gradient - EnjoyCSS. Nó cũng cho phép tạo ra các tính năng CSS khác như nền, bóng, hiệu ứng chuyển tiếp, vv

trắng để minh bạch gradient được tạo ra với công cụ này:

background-image: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%); 
background-image: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%); 
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%); 
background-position: 50% 50%; 
-webkit-background-origin: padding-box; 
background-origin: padding-box; 
-webkit-background-clip: border-box; 
background-clip: border-box; 
-webkit-background-size: auto auto; 
background-size: auto auto;