CSS 将背景色模糊成淡淡的不透明蓝色

Question

我有一个 div，它位于另一个 div 中，我正在尝试为它的背景着色，并使其大约为纯色 [=12=] 的 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 将背景色模糊成淡淡的不透明蓝色

CSS to blur the background color into a light, opaque blue

css

linear-gradients