我想创建一个使用线性渐变的有角度的背景。
但是,我只能解决如何创建从左下角到右上角的白色区域。
background: linear-gradient(to right bottom, #ffffff 49.8%, #e0e0e0 50%);
https://jsfiddle.net/bfq3vv6n/
但是,我想要的白色区域的页面,而不是从底部的左侧开始半山腰,然后完成它已经是在右上方(见图片我希望它看起来如何)
有谁知道我该怎么做?
我想创建一个使用线性渐变的有角度的背景。
但是,我只能解决如何创建从左下角到右上角的白色区域。
background: linear-gradient(to right bottom, #ffffff 49.8%, #e0e0e0 50%);
https://jsfiddle.net/bfq3vv6n/
但是,我想要的白色区域的页面,而不是从底部的左侧开始半山腰,然后完成它已经是在右上方(见图片我希望它看起来如何)
有谁知道我该怎么做?
它很容易,如果你设置的背景大小为宽双重计算。
这样,渐变的中心将与之协调一致的中间点是在左侧的中心:
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>
正是我在找什么,谢谢! – ChatNoir
这样的事情会有帮助吗?
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的帮助下用它。此外,它提供了很多工具,使它看起来像你所期望的。
预览
你想显示的图像应该如何看? –
@PraveenKumar我已添加图片 – ChatNoir
这很完美。帮助。 –