身体和身体：：定位前-解网

问：

我是 HTML 和 CSS 的新手，并且一直在尝试创建一种效果，其中我将背景颜色设置为黑色，并在顶部设置包含噪点的图像（如果）。我现在已经设法按照我想要的方式混合它们，但想知道这是否是正确的做事方式？我也想知道在这种情况下定位如何相关。从我所读到的内容中，我收集到绝对定位的元素是指父元素的定位，它必须是相对的。申请职位可以吗：相对;对身体？

body {
  position: relative;
  color: #fff;
  background-color: #000;
}

body::before {
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='6.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  opacity: 20%;
  content: "";
  background-size: cover;
  mix-blend-mode: screen;
}

我尝试在网上搜索答案，但我很难找到我是否正确地这样做。有知识渊博的人可以向我解释一下我在这里完成的工作吗？

css css-position 伪元素

在正文元素上放置一个 before 伪元素本身并没有什么“不正确”的，在某些情况下是必要的，例如，想要在背景图像上将不透明度设置为小于 1（当您不希望整个正文拾取该不透明度时）。在混合混合模式的情况下也可能如此，具体取决于您要混合的内容。

0赞 user22644056 9/27/2023

@tacoshy参考最后一条评论，我看不出在这种情况下，在我想降低图像的不透明度的情况下，陈述多个背景会如何工作。

答：

-1赞 Harrison 9/27/2023 #1

非常接近！

对于你要做的事情（一个绝对定位的伪装元素），你只需要做几件事：

确保的和属性设置为，以便它们填充它们所附加到的元素。widthheight::before100%
您可以避免设置所有、、和值，方法是使用 @tacoshy 指出的topbottomleftrightinset: 0
（可选）您可能希望在样式中包含：以确保正文是屏幕可见高度的 100%（这在片段上效果不佳）bodymin-height: 100vh

我添加了一些内容，以便您可以看到它的行为方式。您还可以看到浏览器可能会添加其他样式（请参阅：重置 CSS，或此处body)

body {
  position: relative;
  color: #fff;
  background-color: #000;
}

body::before {
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='6.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  inset: 0;
  z-index: -1;
  opacity: 20%;
  content: "";
  background-size: cover;
  mix-blend-mode: screen;
  height: 100%;
  width: 100%;
}

<h1>Heading</h1>
<p>P1</p>
<p>P1</p>
<p>Some text</p>

我想是的，但我只包括它们，因为 OP 说它们是 HTML 和 CSS 的新手，尤其是 CSS 是一个持续的雷区。也因为我想强调，没有一种方法将元素传播到其父元素中，如果元素中还没有内容，则表明我的答案根本不起作用;它突出了 CSS 的行为，这对 OP 来说也很重要，因为它们是所有这些方面的新手。body

上一个：我无法将元素完全居中

下一个：klarna-placement：:p art（osm-container）停止工作（2023 年 9 月 27 日）

身体和身体：：定位前

Body and body::before positioning

评论

评论