Question

我尝试使用最小HTML标记制作网站进行演示拥有以下HTML标记：

<div class="title">I'm a title!</div>

我需要在使用CSS之前添加两个元素，1表示背景，1表示阴影。类似的东西：

.title
{
    display: block;
    position: relative;
}
.title:before
{
    display: block;
    background-color: #00FFFF;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    opacity: 0.5;
}
.title:before
{
    display :block;
    background-color: #111111;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 5px -5px -5px 5px;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    opacity: 0.5;
}

不起作用，因为第二个.title:before会覆盖第一个:before。我无法将元素添加到元素中，因为我需要它具有不透明度。有没有办法在不添加额外标记的情况下执行此操作？如果答案以某种方式不使用两个{{1}}元素，有没有办法指定多一个？

Answer 1

不确定如何应用 n 元素，但只有两个（尤其是此处），在我看来，您可以使用:after第二个元素......

Answer 2

我不确定。你试过.title:before:before之类的东西吗？也许这有帮助......现在无法测试它。

Answer 3

为什么不使用背景渐变图像

然后你打电话给

background : url("../images/image_path.png") 0 0 no-repeat;

Answer 4

我不明白为什么你不能使用......

.title
{
    display: block;
    position: relative;
    background-color: #00FFFF;
}
.title:before
{
    display :block;
    background-color: #111111;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 5px -5px -5px 5px;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    opacity: 0.5;
}

Answer 5

将来只有两个before。现在没有人支持它。

此处说明：http://www.w3.org/TR/2003/WD-css3-content-20030514/#nesting

第二个before将像div::before::before或div::before(2)

一样工作

我如何添加两个：之前的元素？

5 个答案: