Question

我有一个透明的div，我想将背景颜色设置为整个div大小的60％。示例：我的网站上有图像内容。假设有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

您可以使用渐变

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

Answer 2

如果要分割背景，与段落无关，则可以使用渐变：

.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 3

检查出来，有两个可能性：

First example。你有一个渐变和％，你可以设置你想要用哪种颜色填充％。

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

另一方面，您只需更改标记的位置即可。使用此示例Second example

<div class="test">

Answer 4

**

<g:downFace>downFace Text <span class="{res.css.wantedImageAsSprite}"></span></g:downFace>

.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 */
}

Answer 5

将最后两个<p> </p>标记绑定在一个单独的<div> </div>中，并将class="test"应用于该div。

这是小提琴：Working Example

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

您可以提供以下方式：

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

检查Fiddle Here.

Answer 8

请将您的CSS修改为

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

Answer 9

放入包含最后两段的第二个div。如果您在第二部分中有其他内容，那将是最好的。

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

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

div的背景颜色只有一定的高度

9 个答案: