【发布时间】: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