Цвет фона div только определенной высоты

Question

У меня есть прозрачный div, и я хочу установить цвет фона только на 60% от всего размера div. Пример: У меня есть контент с изображением на моем веб-сайте. Скажем, что 60% содержимого, которое я хочу, чтобы цвет фона был установлен на белый, верхняя часть содержимого остается прозрачной.

.test p{ 
    background-color: #f6d8d8; 
} 
.test p:first-child{ 
    background-color: transparent; 
} 

Вот пример: http://jsfiddle.net/318wsehf/ Я хочу иметь красный только на последних двух пунктах. Первый абзац должен оставаться прозрачным, поскольку его набор во внешнем div. Как мне применить этот стиль?

Я изменил см: http://jsfiddle.net/318wsehf/1/

Answer 1

пожалуйста измените CSS для

.test{ 
    background: linear-gradient(to top, #f6d8d8 20%,rgba(0,0,0,0) 60%); 
} 

Answer 2

Bind последних две <p> </p> метки в одном отдельном <div> </div> и применить class="test" к этим делам.

Вот Fiddle: Working Example

Answer 3

Поместите второй DIV, содержащий два последних абзаца. Это было бы лучше, если бы у вас были другие вещи во второй части.

<div> 
<p>...</p> 
<div class="test"> 
<p>...</p> 
<p>...</p> 
</div> 
</div> 

http://jsfiddle.net/318wsehf/4/

Answer 4

Вы можете использовать градиент

.test{ 
    background: linear-gradient(to bottom, #f6d8d8 0%,#f6d8d8 40%,rgba(0,0,0,0) 40%); 
} 

Answer 5

Если вы хотите разделить фон, независимый от абзацев, вы могли бы использовать градиент:

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

Updated Fiddle

Если это нужно разделить точно между абзацами, используйте один из других решений nth-....

Answer 6

Вы можете попробовать следующее:

.test p:nth-child(2),p:nth-child(3){ 
 
     background-color: #f6d8d8; 
 
}

<div class="test"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 

 
    <p>Phasellus vel convallis elit, at lacinia lectus. </p> 
 

 
    <p>Integer elementum nulla sit amet justo varius laoreet. Mauris nec </p> 
 
</div>

Это не мой собственный ответ. Это улучшенная версия одного предыдущего ответа.

Answer 7

Проверьте это, два: максимальными возможностями

First example. У вас есть градиент, и с% вы можете настроить, какой% вы хотите заполнить этим цветом.

background: linear-gradient(to top, #f6d8d8 70%,rgba(0,0,0,0) 60%); 

А с другой стороны вы можете просто изменить расположение своего тега.В этом примере Second example

<div class="test"> 

Answer 8

Вы можете дать следующим образом:

.test{ 
    background: linear-gradient(transparent 70%, #f6d8d8 30%); 
} 

Проверить Fiddle Here.

Answer 9

**

.test{ 
 
    background: rgb(255,255,255); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 60%, rgba(246,216,216,1) 60%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(255,255,255,0)), color-stop(60%,rgba(246,216,216,1))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6d8d8',GradientType=0); /* IE6-9 */ 
 
}

.test{ 
 
    background: rgb(255,255,255); /* Old browsers */ 
 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 60%, rgba(246,216,216,1) 60%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(255,255,255,0)), color-stop(60%,rgba(246,216,216,1))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* IE10+ */ 
 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 60%,rgba(246,216,216,1) 60%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6d8d8',GradientType=0); /* IE6-9 */ 
 
}

<div class="test"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies cursus placerat. Aenean euismod convallis scelerisque. Etiam eget ex dolor. Phasellus diam mi, egestas eu massa vel, pellentesque bibendum augue. Quisque porttitor neque mauris, ac vehicula magna porttitor eget. Phasellus nec interdum nunc. Quisque euismod nulla pellentesque enim posuere posuere. Nullam nunc nunc, efficitur nec interdum sit amet, malesuada pretium dui. Sed convallis felis ut laoreet ultricies.</p> 
 

 
    <p>Phasellus vel convallis elit, at lacinia lectus. Vivamus sed libero at nibh dapibus auctor. Quisque aliquam facilisis turpis, quis tincidunt justo. Fusce sit amet porta ipsum. Vestibulum eget metus commodo, laoreet ex eget, pellentesque dolor. Cras ac vulputate nisl. Quisque tempus sapien condimentum, convallis metus egestas, vehicula erat. In vel purus risus. Maecenas tristique eget massa eget interdum. Pellentesque gravida ut mi vel maximus. Nulla nec justo mattis, ullamcorper sem at, tempor eros. Integer pretium vel nunc non ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi.</p> 
 

 
    <p>Integer elementum nulla sit amet justo varius laoreet. Mauris nec porttitor est, tincidunt gravida dui. Duis tempor pharetra felis. Suspendisse potenti. Etiam convallis cursus turpis, eget finibus est suscipit eget. Aenean vitae eros nulla. Etiam congue ipsum velit, eu ultrices turpis tincidunt id. Morbi eu sodales lorem. Vivamus vel aliquet enim, sit amet tincidunt ex. Phasellus luctus nunc eget lobortis fermentum. Nullam ex felis, interdum ac odio sed, lacinia dignissim nisi. Aenean dolor lorem, placerat vitae suscipit et, aliquet vel leo. </p> 
 
</div>