文本作为 CSS 的背景图像

Posted 2023-02-25

【中文标题】文本作为 CSS 的背景图像

【英文标题】：Text as background images for CSS

【发布时间】：2015-07-15 21:27:07

【问题描述】：

我正在尝试使用 Jquery 和 CSS 将字母表中的字母（随机）显示为 div 的背景图像，但是，我希望每个元素的字母是随机的，但我只能对所有图像进行随机化同时：

html：

<div  class="randbg"></div>
<div  class="randbg"></div>
<div  class="randbg"></div>
<div  class="randbg"></div>

JS

(function($) 

    $.fn.RandBG = function(options) 

        var settings = $.extend(
            ClassPrefix: "bg",
            count: 26
        , options);

        var index = Math.ceil(Math.random() * settings.count * settings.count) % settings.count;

        $(this).addClass(settings.ClassPrefix + index);
    ;

(jQuery));

CSS

.randbg 
    margin:20px auto;
   font-family: 'Parkour';
   color:red;
    width:180px;
    height:180px;



.randbg:before 
    display:block;
    font-size:10em;
    text-align: center;
    vertical-align: center;
background-color:#EDEDED;


.randbg.bg0:before 
content:"z";


.randbg.bg1:before 
content:"a";

.randbg.bg2:before 
content:"b";

.randbg.bg3:before 
content:"c";


.randbg.bg4:before 
content:"d";


.randbg.bg5:before 
content:"e";


.randbg.bg6:before 
content:"f";


.randbg.bg7:before 
content:"g";


.randbg.bg8:before 
content:"h";


.randbg.bg9:before 
content:"i";


.randbg.bg10:before 
content:"j";


.randbg.bg11:before 
content:"k";


.randbg.bg12:before 
content:"l";


.randbg.bg13:before 
content:"m";


.randbg.bg14:before 
content:"n";


.randbg.bg15:before 
content:"o";


.randbg.bg16:before 
content:"p";


.randbg.bg17:before 
content:"q";


.randbg.bg18:before 
content:"r";


.randbg.bg19:before 
content:"s";


.randbg.bg20:before 
content:"t";


.randbg.bg21:before 
content:"u";


.randbg.bg22:before 
content:"v";


.randbg.bg23:before 
content:"w";


.randbg.bg24:before 
content:"x";


.randbg.bg25:before 
content:"y";

让每个 randbg div 显示随机字母的最佳方法是什么？

谢谢

【问题讨论】：

你能解释一下代码当前在做什么而不是你想要的吗？我不确定我是否完全理解您的问题。

jsfiddle.net/vv058tho/1

@JaredFarrish 非常漂亮:)

【参考方案1】：

问题是你的插件。您将相同的类应用于所有匹配的元素。我假设你这样称呼它

$('.randbg').RandBG();

您有多种选择，但我可能会使用 addClass() 的回调版本

$.fn.RandBG = function(options) 
    var settings = $.extend(
        classPrefix: "bg",
        count: 26
    , options);

    return this.addClass(function() 
        return settings.classPrefix + Math.floor(Math.random() * settings.count);
    );
;

您还应该记住始终从插件函数返回 jQuery 集合 (this)，因此它们是 chainable。

JSFiddle

【讨论】：

嘿菲尔，非常感谢。我不确定您要返回“this”是什么意思，我已阅读您链接中的文章。