Question

我希望每篇文章的数量越来越多，因为CSS中的背景图片也称为：https://snag.gy/NHVSpr.jpg

这个类似于另一个Stackoverflow：
文本作为CSS的背景图像（Text as background images for CSS）
在那里也有一个JS FIDDLE。该代码的代码是：

＆＃13;

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 + '"/>');
})

＆＃13;

.randbg {
  width: 7px;
  height: 75px;
}

.randbg:before {
  content: attr(data-content);
}

＆＃13;

<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>

＆＃13;

我目前的代码是：

<?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++;
         }
     }
 ?>

Answer 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>

CSS - （增加）数字作为CSS的背景图像

1 个答案: