Question

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

Answer 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>

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

1 个答案: