【问题标题】:CSS - (increasing) number as background images for CSSCSS - (增加的)数字作为 CSS 的背景图像
【发布时间】:2017-09-16 19:40:42
【问题描述】:

我希望增加每篇文章的数量作为 CSS 中的背景图片,也就是:https://snag.gy/NHVSpr.jpg

这与此处的另一个 Stackoverflow 相似:
文本作为 CSS 的背景图像 (Text as background images for CSS)
那里也有一个 JS FIDDLE。该代码是:

var $divs = $('.randbg'),
  alpha = 'abcdefghijklmnopqrstuvwxyz';

$divs.each(function ea() {
  var letter = alpha[Math.floor(Math.random() * alpha.length)].toUpperCase();

  $(this)
    .attr('data-content', letter)
    .html('<img src="http://placehold.it/75x75&number=' + letter + '"/>');
})
.randbg {
  width: 7px;
  height: 75px;
}

.randbg:before {
  content: attr(data-content);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="randbg">What happens</div>
<div class="randbg">Why not</div>
<div class="randbg"></div>
<div class="randbg"></div>

我当前的代码是:

<?php $i2=0; 
    foreach ($items2 as $item2) {
        if ($i2 < 4) {

            printf('<div class="right-now-box">');
            printf('<img src="%s" class="width-100">',$item2['image2']);
            printf('<a target="_blank" class="left-sidebar-news-text" href="%s">%s</a>', $item2['link2'], $item2['title2']);
            printf('</div>');

            $i2++;
         }
     }
 ?>

【问题讨论】:

  • 我当前的代码给我这个:snag.gy/nBf8CR.jpg。 JSFIDDLE 到提到的 stackoverflow:jsfiddle.net/vv058tho/1
  • 利用 CSS 计数器和伪元素,例如 ::before!
  • 欢迎来到 Stack Overflow!请收下tour,看看周围,通读help center,尤其是How do I ask a good question?,努力解决问题。如果您在这样做时遇到了特定问题,请在您的尝试中发布问题(包括所有相关代码),说明什么不起作用,并解释您迄今为止的研究。
  • @RoryMcCrossan : 你真的很讨厌新成员吧?
  • 当你给人们-1时,你会降低他们解决问题的机会。我希望你理解这个@RoryMcCrossan。然后它与语法无关。它要么是你厌倦了人们不按照你的哲学写作应该怎么写。单词仍然是单词。或者你不知道你第一次来这里是什么感觉。 Stackoverflow 并没有过分热心的成员,他们给他们看到的每个线程 -1 都与他们自己的编写方式略有不同。记住这一点。

标签: javascript jquery html css


【解决方案1】:

使用CSS's counters 和伪元素::before

body {
  counter-reset: myCounter;         /* initialize a counter called myCounter */
}


.article {
  border: 1px solid black;
  position: relative;
}

.article::before {                  /* for each .article add a ::before element */
  counter-increment: myCounter;     /* first increment the counter myCounter */
  content: counter(myCounter);      /* set the text of this ::before element to the value of counter */
  
  font-size: 5em;
  color: #00ffff;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
<div class="article">
  Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<div class="article">
  Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<div class="article">
  Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>

【讨论】:

  • Ty 这么多@ibrahim
  • 欢迎您!注意z-index,这里很重要!
猜你喜欢
  • 2017-05-15
  • 2015-07-15
  • 2013-10-01
  • 1970-01-01
  • 2023-03-12
  • 2013-12-01
  • 1970-01-01
  • 2014-02-17
相关资源
最近更新 更多