Несколько слоев фонового цвета

Question

Я задавался вопросом, можно ли создать два фоновых цвета для div, накладывая их на них.

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

Answer 1

Не понимая, почему вы хотите этого, это можно сделать, используя сплошные цветовые градиенты: fiddle.

body { 
    background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)), 
       linear-gradient(white, white); /* first bg is on top of this */ 

} 

Answer 2

Чтобы ответить на ваш вопрос, да, есть способ. Вы можете использовать фоновое изображение и цвет фона в одном div. Check out this SOF post.

Хотя я хотел бы рассмотреть другой метод, как это:

Состав:

<div class="parent"> 
    <div class="white"></div> 
    <div class="color"></div> 
</div> 

CSS:

.parent { 
    position: relative: 
} 
.white, .color { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
} 
.white { 
    z-index: 9998; 
} 
.color { 
    z-index: 9999; 
} 

Вы можете возиться с details here, но общая идея состоит в том что ваш слой разделяет друг на друга. Диверс с высшим z-индексом будет сверху. Соответственно измените их цвета. Родительский родительский div будет относиться к абсолютным div внутри этого контейнера.

Answer 3

Вы не можете определить два фоновых цвета для одного элемента, но вы можете наложить один цветной элемент на вершине белого одного для того, чтобы получить эффект смешивания, в то время как блокирование ничего под ними:

JSFiddle

HTML

<div class="one"> 
    <div class="two"></div> 
</div> 

CSS

div { 
    width: 100px; 
    height: 100px; 
} 

.one { 
    background-color: #fff; 
} 
.two { 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,255,0.2); 
} 

Answer 4

Хотя Adrift's answer - путь, вы также можете использовать псевдоэлементы для этого.

body { 
    background: white; 
    position: relative; 
} 

body:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left; 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(220,14,120,0.5); 
    z-index: 1; 
} 

/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */ 
body * { 
    z-index: 2; 
    position: relative; 
} 

Адрес fiddle.

Однако, это не производство дружественное:

• Настройка позиция по отношению к телу, и все другие элементы, когда не надо
• Установки ненужной Z-индекс по всем элементам

только вверх этот метод состоит в том, что он не использует градиенты, которые с семантической точки зрения более логичны.