tôi đã có thể làm điều gì đó tương tự trong css tinh khiết, tuy nhiên, nó không hoạt động trong IE, vì nó không hỗ trợ bất động sản hỗn hợp-pha trộn chế độ css: http://caniuse.com/#feat=css-mixblendmode
Mã đoạn mã bên dưới. Hy vọng nó sẽ giúp ai đó.
<html>
<head>
<style>
.gradient {
position: relative;
content: '';
display: block;
width: 260px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1)));
background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
background: linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
}
.gradient p {
color: #000;
background: #fff;
mix-blend-mode: lighten;
}
</style>
</head>
<body>
<div class="gradient">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>
Thật đáng kinh ngạc .... Nhưng thật đáng tiếc khi chỉ có trình duyệt webkit của nó .... Tôi tự hỏi liệu có bất kỳ công việc nào cho IE và firefox không !? cảm ơn vì điều đó. – ragebunny
Hy vọng rằng các trình duyệt khác sẽ bắt đầu triển khai các tính năng này, nhưng cho đến lúc đó nó chỉ là một trang web không may. – joshnh