[英]CSS linear gradient angle position
我正在嘗試使用線性漸變創建一個有角度的背景。
但是,我只能弄清楚如何創建一個從左下角到右上角的白色區域。
background: linear-gradient(to right bottom, #ffffff 49.8%, #e0e0e0 50%);
https://jsfiddle.net/bfq3vv6n/
但是,我希望白色區域從頁面左側開始,而不是從底部開始,然后在右上角已經完成(請參閱圖像,了解我希望它看起來如何)
有誰知道我怎么做到這一點?
這樣的事情會有所幫助嗎?
div { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+40,e0e0e0+100&0+0,0+39,1+40,1+100 */ background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(225,225,225,0) 39%, rgba(224,224,224,1) 40%, rgba(224,224,224,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(225,225,225,0) 39%,rgba(224,224,224,1) 40%,rgba(224,224,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0e0e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ height: 100px; width: 100px; border: 2px solid #ccc; }
<div></div>
我在ColorZilla的幫助下使用它。 此外,它提供了許多工具,使它看起來像你期望的那樣。
預習
如果將背景大小設置為寬度的兩倍,則更容易計算。
這樣,漸變的中心將與位於左側中心的中點保持一致:
div { width: 200px; height: 200px; border: solid 1px green; background-image: linear-gradient(153.43deg, white 50%, gray 50%); background-size: 200% 100%; background-position: right top; }
<div></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.