CSS将背景颜色模糊为浅蓝色不透明

时间:2015-09-08 15:27:36

标签: css css3 linear-gradients

我有一个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)结束。

1 个答案:

答案 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>