8
Как я могу дать один div несколько цветов фона или изображений в CSS? Например, я хочу, чтобы верхняя часть была красной, а середина была синей, а нижняя - зеленой.Несколько цветов фона, изображений в css
A
ответ
7
Один linear-gradient в качестве фона достаточно
background: linear-gradient(to bottom,
red 0, red 33.33%,
blue 0, blue 66.66%,
green 0, green 100%
);
+0
Ницца. Можете ли вы объяснить, что делают 0 без знаков? –
+1
это то, как прекращается работа с цветом: когда вы устанавливаете останов цвета, значение которого ниже предыдущего цвета, оно автоматически устанавливает наибольшее значение, определенное ранее. Таким образом, это эквивалентно написанию «красный 0, красный 33,33%, синий 33,33, синий 66,66%, зеленый 66,66, зеленый 100%», но есть менее повторяющиеся значения (например, если вы изменили 66,66 с 80%, вы должны дважды изменить значение) – fcalderan
3
градиенты использования в css3.
YourDIVID {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}
2
TOP, BOTTOM, CENTER множественный цвет Учебник для Сигле линии
#multiple {
width: 700px;
height: 500px;
background:linear-gradient(red, yellow, green, blue, purple, orange);
}
1
Используйте :before and :after pseudo element rules, чтобы иметь три разных слоя фона (цвет и изображения) на одном элементе.
Примечание: Это решение требует, чтобы содержащиеся элементы были обернуты, чтобы оставаться выше фона. В противном случае ссылки могут быть недоступны, текст не выбирается и т. Д.
Запустите фрагмент кода для рабочего примера.
.layered-backgrounds {
background-color: #C63;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
height: 400px;
z-index: 1;
}
.layered-backgrounds:before {
position: absolute;
content: " ";
top: 0;
height: 120px;
width: 100%;
background: #39C;
z-index: 2;
opacity: 0.8;
}
.layered-backgrounds:after {
position: absolute;
content: " ";
bottom: 0;
height: 120px;
width: 100%;
background: #9C3;
z-index: 3;
opacity: 0.8;
}
.layered-backgrounds .content {
position: relative;
z-index: 4;
}<div class="layered-backgrounds">
<div class="content">
<a href="#">Clickable</a> and selectable contents.
</div>
</div>
Привет, посмотрите на эту тему. http://stackoverflow.com/a/6457484/4362192 – cdslijngard