0

在代码中：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
    position: absolute;
    top:500px;  
    width:400px;
    border:1px solid green;
} 

.parent:before {
    z-index:-1;
    content:'';
    position:absolute;

    opacity:0.5;
    width:400px;
    height:200px;
    background-image:url('wallpaper324845.jpg');
    border:1px solid red;
}

.child {
    Color:black;
    border:1px solid black;
}
</style>
</head>

<body>
<div class="parent">
    <div class="child">Hello I am child</div>
</div>
</body>

</html>

我正在尝试创建一个透明背景，如该线程中所述：如何在父 div 中设置不透明度而不影响子 div？.

查看第 4 个答案中的代码。这是如何工作的，我对.parentand的使用感到困惑.parent:before。我认为这会.parent:before在每个父元素之前创建一个元素。真的很困惑这是如何工作的？

4

4 回答 4

1

:before使用 CSS 创建虚拟内容，因此在上述情况下，作者使用以下代码段表示

.parent:before{
   z-index:-1;
   content:'';
   position:absolute;
   opacity:0.5;
   width:400px;
   height:200px;
   background-image:url('wallpaper324845.jpg');
   border:1px solid red;
}

他正在使用 创建一个虚拟元素:before，然后他将其定位absolute、分配一些维度并分配background，以确保它保持在div内容下方，他使用z-index: -1;

换句话说，:before,:after只不过是假设span在你的 中嵌套了两个元素div，但是通过使用pseudo元素，你不需要拥有span，因为你可以使用伪元素来实现同样的事情。

考虑你有这样的东西

<div>
    Hello
    <span></span>
</div>

div {
   position: relative; 
}

div span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    z-index: -1;
    left: 0;
    top: 0;
}

演示

也可以使用:beforeor来实现:after，标记保持不变，但 CSS 就像

div {
   position: relative; 
}

div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    z-index: -1;
    left: 0;
    top: 0;
}

演示

因此，它只是在 HTML 中为您节省了一个空元素，但是如果您查看上面的 CSS，我正在使用始终与or关联的content属性，是的，它是必需的，即使您将其保留为空白。:before:after

另外，请注意，:before生成:after的内容是inline，因此为了使 make工作height，width您需要明确提及display: block;或者display: inline-block;如果您想使其成为块级别，但在这种特殊情况下，您不需要它，因为伪元素被定位absolute

div:after {
    content: "Hello";
    margin-top: 20px; /* This wont work as pseudo is inline by default */
}

演示

所以让它block或inline-block

演示

于 2014-02-18T09:03:08.003 回答
1

作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。正如它们的名字所示，:before 和 :after 伪元素指定了元素文档树内容之前和之后的内容位置。'content' 属性与这些伪元素一起指定插入的内容。

下面是一个以 HTML 为根的文档树。

HTML
.HEAD    
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI

例如，以下规则在每个“class”属性值为“note”的 P 元素的内容之前插入字符串“Note:”：

p.note:before { content: "Note: " }

由元素生成的格式化对象（例如，框）包括生成的内容。因此，例如，将上述样式表更改为：

p.note:before { content: "Note: " }
p.note        { border: solid green }

将导致整个段落周围呈现一个纯绿色边框，包括初始字符串。

:before 和 :after 伪元素从它们所附加的文档树中的元素继承任何可继承的属性。

例如，以下规则在每个 Q 元素之前插入一个左引号。引号的颜色将为红色，但字体与 Q 元素其余部分的字体相同：

q:before {
  content: open-quote;
  color: red
}

在 :before 或 :after 伪元素声明中，非继承属性采用它们的初始值。

因此，例如，因为 'display' 属性的初始值为 'inline'，所以前面示例中的引号作为内联框插入（即，与元素的初始文本内容在同一行）。下一个示例将 'display' 属性显式设置为 'block'，以便插入的文本变成一个块：

body:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

:before 和 :after 伪元素元素与其他框交互，例如插入框，就好像它们是插入到相关元素中的真实元素一样。

例如，以下文档片段和样式表：

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...将以与以下文档片段和样式表完全相同的方式呈现：

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

同样，以下文档片段和样式表：

<h2> Header </h2>     h2 { display: run-in; }
                      h2:after { display: block; content: 'Thing'; }
<p> Text </p>

...将以与以下文档片段和样式表完全相同的方式呈现：

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }
<p> Text </p>
于 2014-02-18T09:10:03.887 回答
0

基本上，:before（如 :after）是一个 CSS 伪元素。所以它几乎就像一个 HTML 内联元素。几乎。

要使用伪元素，您需要给它一个content属性（大多数情况下为空字符串）。请注意，默认情况下它是一个内联元素，因此它不能有宽度/高度。您需要设置display: block（或内联块，或其他）。

我认为您错过了relative在父元素（.parent）上设置位置。它是：

.parent{
  position: relative;
  top:500px;  
  width:400px;
  border:1px solid green;
}
于 2014-02-18T09:03:18.320 回答
0

试着看看这篇文章。它解释了 :before 和 :after 伪选择器如何工作：

http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

于 2014-02-18T09:04:16.037 回答