Question

我正在尝试学习CSS，最近遇到了mix-blend-mode，我在codepen here上发现了非常不错的代码，但是当我尝试text-align时：center; 只有h1对齐。

  div {
    position: relative;
  }
  
  h1 {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 8vw;
    font-weight: bold;
    color: rgba(0, 0, 200, 0.7);
  }
  
  h1::before {
    position: absolute;
    z-index: 5;
    left: -5px;
    top: 0;
    content: attr(text);
    color:rgba(200,0,0,.7);
    mix-blend-mode: multiply;
  }
  
  h1::after {
    position: absolute;
    z-index: 5;
    left: 5px;
    top: 0;
    content: attr(text);
    color:rgba(0,200,0,.7);
    mix-blend-mode: multiply;
  }

<div>
  <h1 text="BLEND-MODESを使う">BLEND-MODESを使う</h1>
</div>

Answer 1

您看到的text-align问题根本与您使用mix-blend-mode无关。

css属性text-align将使文本内容在元素的可用空间内对齐。

对于块元素来说，通常很简单，您可以获得居中的文本。在这里，我们看到一个简单的示例，h1是一个块元素，因此占用了整个可用宽度，并且文本居中对齐。

我添加了红色背景，以便您可以确切看到h1元素的位置：

h1 {
  background-color: red;
  text-align: center;
}

<h1>
Test
</h1>

但是，当您更改元素的position属性时，会将元素从盒子模型的 flow 中取出。这意味着它不会考虑其他元素的位置计算，也不会在自己的位置计算中使用其他元素，包括宽度和高度。因此，它失去了计算“使用全宽”含义的能力。因此，块级元素的行为开始像内联元素，宽度是包含内容的最小宽度。

请注意我们的红色背景：

h1 {
  background-color: red;
  text-align: center;
  position: absolute;
}

<h1>
Test
</h1>

文本是“居中的”，但是由于元素的宽度与文本相同，因此效果消失了。

要想看到一个比文本大的框，且其文本居中，您可能必须a）不使用绝对定位，以便返回框模型流，或b）使用css { {1}}属性。

CSS无法将文字与:: before和:: after

1 个答案: