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

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

只要中间的颜色无关紧要，就不需要指定额外的颜色停止位置。只需指定开始和结束颜色就足够了（sn-p 中的第一个div）。浏览器会自动逐渐均匀地分割颜色。

当您在两者之间添加额外的颜色停止位置时，渐变将被强制在指定点具有指定颜色，这会产生锐边效果（sn-p 中的第二个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>