(CSS) Полноцветный фоновый переход в div

Question

Я хотел бы спросить, есть ли возможность сделать полный переход цвета, например, с черного на белый без каких-либо градиентов в одном элементе (div).

Например, в этом изображении:

Я один элемент DIV с другой DIV внутри центрируется в нем. Интересно, можно ли сделать что-то подобное, используя только атрибут background-color в CSS. Я знаю, что это может работать с использованием атрибутов 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