主页 / 问题 / 708973
Accepted
kizoso
Asked:2020-08-22 16:53:39 +0000 UTC2020-08-22 16:53:39 +0000 UTC

css伪元素内容可以设置重复吗？

  • 772

假设我们有代码：

div {
  position: relative;
  background: blueviolet;
  height:100px;
}

div:before {
  content: 'продано';
  color: white;
}
<div></div>

我想用相同的元素填充整个 div，使它看起来像这样：

div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано продано ';
  color: white;
}
<div></div>

是否可以为内容提供类似重复内容的内容，这样我们就不必手动编写所有重复内容？另外，div的大小是事先不知道的。

UPD 我想获得一个跨浏览器的解决方案。

html

6 个回答

  1. Best Answer

    使用 css variables ，您可以快速增加内容（每个变量加倍）：

    div {
  position: relative;
  background: blueviolet;
  height: 100px;
  overflow: hidden;
}

div:before {
  --a: "продано";
  --b: var(--a) " " var(--a);
  --c: var(--b) " " var(--b);
  --d: var(--c) " " var(--c);
  --e: var(--d) " " var(--d);
  --f: var(--e) " " var(--e);
  --g: var(--f) " " var(--f);
  --h: var(--g) " " var(--g);
  
  content: var(--h);
  color: white;
  display: block;
}
    <div></div>

    顺便说一句，您可以看到这样的加倍本质上给出了类似于二进制数系统的东西，它允许您准确地指定重复次数。例如，对于 21 次重复，您需要使用 16 + 4 + 1：

    div {
  position: relative;
  background: blueviolet;
  height: 100px;
  overflow: hidden;
}

div:before {
  --a: "продано";                /*  1 */
  --b: var(--a) " " var(--a);    /*  2 */
  --c: var(--b) " " var(--b);    /*  4 */
  --d: var(--c) " " var(--c);    /*  8 */
  --e: var(--d) " " var(--d);    /* 16 */
  
  content: var(--e) " " var(--c) " " var(--a);
  color: white;
  display: block;
}
    <div></div>

    而且，当然，您可以使用任何其他合适的系统来代替二进制文件。对于相同的 21，您可以执行 (3 * 2 + 1) * 3：

    div {
  position: relative;
  background: blueviolet;
  height: 100px;
  overflow: hidden;
}

div:before {
  --a: "продано";                                /*  1 */
  --b: var(--a) " " var(--a) " " var(--a);       /*  3 */
  --c: var(--b) " " var(--b) " " var(--a);       /*  7 */
  
  content: var(--c) " " var(--c) " " var(--c);   /* 21 */
  color: white;
  display: block;
}
    <div></div>

    • 25

  2. 全锡使用text-shadow：

    div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'продано';
  color: white;
  text-shadow:
    8ch 0 0 white, 16ch 0 0 white, 24ch 0 0 white, 32ch 0 0 white, 40ch 0 0 white, 48ch 0 0 white, 56ch 0 0 white, 64ch 0 0 white, 72ch 0 0 white, 80ch 0 0 white,
    0 1.5em 0 white, 8ch 1.5em 0 white, 16ch 1.5em 0 white, 24ch 1.5em 0 white, 32ch 1.5em 0 white, 40ch 1.5em 0 white, 48ch 1.5em 0 white, 56ch 1.5em 0 white, 64ch 1.5em 0 white, 72ch 1.5em 0 white, 80ch 1.5em 0 white,
    0 3em 0 white, 8ch 3em 0 white, 16ch 3em 0 white, 24ch 3em 0 white, 32ch 3em 0 white, 40ch 3em 0 white, 48ch 3em 0 white, 56ch 3em 0 white, 64ch 3em 0 white, 72ch 3em 0 white, 80ch 3em 0 white,
    0 4.5em 0 white, 8ch 4.5em 0 white, 16ch 4.5em 0 white, 24ch 4.5em 0 white, 32ch 4.5em 0 white, 40ch 4.5em 0 white, 48ch 4.5em 0 white, 56ch 4.5em 0 white, 64ch 4.5em 0 white, 72ch 4.5em 0 white, 80ch 4.5em 0 white;
}
    <div></div>

    • 20

  3. 过滤器的细节要少得多drop-shadow：它允许您在每次调用时将内容翻倍）。但是，我必须编写display: block它才能正确呈现：

    div {
  position: relative;
  background: blueviolet;
  height: 100px;
}

div:before {
  content: 'продано';
  color: white;
  display: block;
  filter: 
    drop-shadow(8ch 0 0 white)
    drop-shadow(16ch 0 0 white)
    drop-shadow(32ch 0 0 white)
    drop-shadow(64ch 0 0 white)
    drop-shadow(0 1.5em 0 white)
    drop-shadow(0 3em 0 white);
}
    <div></div>

    • 16

  4. 仅适用于 Firefox 的解决方案：https ://developer.mozilla.org/ru/docs/Web/CSS/element

    div {
  position: relative;
  background: red; /* если решение ниже не поддерживается, блок останется красным */
  background: -moz-element(#src) blueviolet;
  background: element(#src) blueviolet;
  height: 100px;
}

#src {
  position: absolute;
  top: -2em;
}

#src:before {
  content: 'продано\A0';
  color: white;
}
    <span id="src"></span>
<div></div>

    • 10

  5. 不，标准中没有这样的属性，仅仅是因为它:before不是为此而设计的。如果不想用 JS，也可以overflow: hidden;写content: attr(data-bg-text);. 然后在文档末尾的某处创建一个隐藏的 div，并编写一个data-bg-text值为“已售出...直到你脸色发青”的属性。但我认为这个选项只会带来痛苦。所以答案是否定的。

    • 7

  6. 可以使用javascript

    这是一个例子：

    div {
  position: relative;
  background: blueviolet;
  height: 216px;
}

div:before {
  color: white;
}
    <div>

  <script>
    var s = "продано ";

    for (var i = 1; i <= 108; ++i) {

      document.write(s);

    }
  </script>

</div>

    • 4

相关问题