文字作为CSS的背景图片 [英] Text as background images for CSS

问题描述

我正在尝试使用Jquery和CSS将字母(随机)显示为div的背景图像，但是，我希望每个元素的字母都是随机的，但是我只能将所有图像上的字母随机化同时:

I am trying to display the letters of the alphabet(randomly) as background images for divs using Jquery and CSS, however, I want the letters to be random per element, but I am only able to randomise this for all images at the same time:

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显示随机字母的最佳方法是什么?

What is the best way to make each randbg div display a random letter?

谢谢

推荐答案

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

The problem is your plugin. You're applying the same class to all matched elements. I'm assuming you're calling it like this

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

您有几种选择，但是我可能会使用 addClass()

You have several options but I'd probably use the callback version of 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)，因此它们是

You should also remember to always return the jQuery collection (this) from plugin functions so they're chainable.

JSFiddle

这篇关于文字作为CSS的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！