（CSS）div中的全彩色背景转换

Question

我想询问是否有一个选项可以实现从一个元素（div）中没有任何渐变的黑色到白色的全色过渡。

例如，在此图片中：

我有一个div元素，其中另一个div位于其中心。我想知道是否可以仅使用CSS中的background-color属性来执行此类操作。我知道这可能会使用像position属性这样的东西，或者使用带有颜色的背景图像，但我想尝试这种方式。

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