在 css 中将旋转背景设置为不重复

Setting rotating backgrounds in css to not repeat

本文关键字：设置 背景 css 旋转      更新时间：2023-09-26

我试图阻止我的旋转背景重复。我在这里错过了什么，需要去哪里？我让图像旋转和链接，但是当背景渲染时，图像会重复。

/* Clickable BG */
$(function() {
        var bgImages = ["bkgd1.png", "bkgd2.png", "bkgd3.png", "bkgd4.png"];
        var indexImage = Math.floor(Math.random() * bgImages.length);
        /*
        setInterval(function(){
                $('body').css('background-image', "url(/css/images/" + bgImages[indexImage] + ")");
                indexImage++;
                if(indexImage == bgImages.length) {
                        indexImage = 0;
                }
        }, 3000);
        */
        $('body').addClass(bgImages[indexImage]).css('background-image', "url(/css/images/" + bgImages[indexImage] + ")");
});
$('.clickableBG').click(function() {
        if($('body').hasClass('bkgd1.png')) {
                window.open("https://www.google.com/", "_self");
        }
        else if($('body').hasClass('bkgd2.png')) {
                window.open("https://www.yahoo.com/");
        }
        else if($('body').hasClass('bkgd3.png')) {
                window.open("https://www.aol.com/");
        }
        else if($('body').hasClass('bkgd4.png')) {
                window.open("https://www.aol.com/");
        }
});
/* Clickable BG */

我不知道

我是否理解你的问题是什么，但是当你的意思是背景图像在一个元素中重复时，你应该使用：

background-repeat: no-repeat;

还有其他有用的选项：

background-color
background-repeat
background-attachment
background-position
相关文章：