我有一个div,它位于另一个div中,我试图为背景着色并使其约为纯色#0F7BD5
的50%,然后模糊为该颜色的更透明版本。我已经提出了这个CSS,但它显示了一个锐利的边缘,而不是我试图创建的模糊/褪色效果。这是我提出的CSS:
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
-webkit-background-background-image: -webkit-linear-gradient(-180deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: -moz-linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15,123,213,0.7) 40%, rgba(15,123,213,0.6) 45%, rgba(15,123,213,0.52) 50%, rgba(15,123,213,0.4) 55%, rgba(15,123,213,0.3) 59%, rgba(15,123,213,0.2) 63%, rgba(15,123,213,0.15) 100%);
介于两者之间的颜色并不重要,只要它从此#0F7BD5
开始,没有透明度,并以此rgba(15,123,213,0.15)
结束。
答案 0 :(得分:1)
只要两者之间的颜色无关紧要,就无需指定额外的颜色停止位置。只需指定开始和结束颜色,这应该足够(在代码段中首先div
)。浏览器会自动均匀地逐渐分割颜色。
当您在其间添加额外的颜色停止位置时,渐变会被强制在指定点处具有指定的颜色,这会产生锐利的边缘效果(片段中的第二个div
)。由于颜色分布不均匀而产生锐边。例如,对于渐变的前40%,alpha从1变为0.7,但对于接下来的5%(40%到45%),它会突然下降0.1。
div {
position: relative;
display: inline-block;
height: 200px;
width: 200px;
}
#gradual:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5, rgba(15, 123, 213, 0.15));
}
#sharp:after {
position: absolute;
content: '';
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
background-image: linear-gradient(270deg, #0F7BD5 0, rgba(15, 123, 213, 0.7) 40%, rgba(15, 123, 213, 0.6) 45%, rgba(15, 123, 213, 0.52) 50%, rgba(15, 123, 213, 0.4) 55%, rgba(15, 123, 213, 0.3) 59%, rgba(15, 123, 213, 0.2) 63%, rgba(15, 123, 213, 0.15) 100%);
}
<div id="gradual"></div>
<div id="sharp"></div>