(CSS) div 中的全彩色背景过渡

Question

我想问一下是否有一个选项可以在一个元素 (div) 中没有任何渐变的情况下进行全色过渡，例如从黑色到白色。

例如在这张图片中：

我有一个 div 元素，其中另一个 div 居中。我想知道是否可以仅使用 CSS 中的 background-color 属性来做这样的事情。我知道这可能会使用诸如位置属性之类的东西或使用涂有颜色的背景图像，但我想尝试这种方式。

Answer 1

当然有。在父 div 上使用背景渐变并定位子元素：

#container {
  background: #000000;
  background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #000000 50%, #ffffff 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #000000), color-stop(50%, #ffffff));
  background: -webkit-linear-gradient(top, #000000 50%, #ffffff 50%);
  background: -o-linear-gradient(top, #000000 50%, #ffffff 50%);
  background: -ms-linear-gradient(top, #000000 50%, #ffffff 50%);
  background: linear-gradient(to bottom, #000000 50%, #ffffff 50%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0);
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  position: relative;
}
#inner {
  position: absolute;
  margin: auto;
  width: 300px;
  height: 100px;
  background: red;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div id="container">
  <div id="inner"></div>
</div>

Answer 2

您仍然会使用渐变来执行此操作。一个很好的工具是http://www.colorzilla.com/gradient-editor/ 来完成这项工作。它会为您的渐变提供以下代码。

代码链接是http://colorzilla.com/gradient-editor/#000000+0,000000+49,ffffff+50,ffffff+100

background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #000000 49%, #ffffff 50%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(49%,#000000), color-stop(50%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

Answer 3

链接生成器 CSS：

http://www.cssmatic.com

background: rgba(231,56,39,1);
background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,12,1) 49%, rgba(90,51,219,1) 50%, rgba(90,51,219,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(29%, rgba(240,47,23,1)), color-stop(49%, rgba(246,41,12,1)), color-stop(50%, rgba(90,51,219,1)), color-stop(100%, rgba(90,51,219,1)));
background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,12,1) 49%, rgba(90,51,219,1) 50%, rgba(90,51,219,1) 100%);
background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,12,1) 49%, rgba(90,51,219,1) 50%, rgba(90,51,219,1) 100%);
background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,12,1) 49%, rgba(90,51,219,1) 50%, rgba(90,51,219,1) 100%);
background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(240,47,23,1) 29%, rgba(246,41,12,1) 49%, rgba(90,51,219,1) 50%, rgba(90,51,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e73827', endColorstr='#5a33db', GradientType=0 );

Answer 4

您将声明“渐变”，但只是为了达到您的效果。这不会是渐变。看看下面。在哪里你会看到两种硬色分割同一个背景<div>

.c{    
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}

JS JIDDLER (view the bottom div, div C)

原始来源：How can apply multiple background color to one div