在后网格布局上随机选择不同颜色的背景

Random different colored backgrounds on post grid layout

本文关键字：颜色 背景 选择 随机 网格 布局      更新时间：2023-09-26

我想使用这个插件来显示博客文章，但客户端想要的不是图像作为背景，而是不同颜色的图像。从这里的另一篇帖子中，我已经找到了我相信可以做到这一点的代码，但我无法在网站上使用它！。这是我制作的代码，它似乎在这里工作。代码工作的示例。

这是目前有问题的网站。div站点没有正常工作。。。

你会看到所有的颜色都是一样的，而不是像应该的那样交替。。。如果有任何有用的建议，我们将不胜感激。

这是上面jsfiddle中的CSS和JS。

CSS：

.custom_tdgclients_grid{width:20%;height:90px;display:inline-block}
.custom_tdgclients_grid{background:#a7948b}
.custom_tdgclients_grid:nth-child(2n){background-color:rgb(232, 73, 73)!important;}
.custom_tdgclients_grid:nth-child(3n){background-color:rgb(83, 71, 65)!important;}
.custom_tdgclients_grid:nth-child(4n){background-color:#e8d2af!important;}
.custom_tdgclients_grid:nth-child(5n){background-color:rgb(131, 119, 113)!important;}
.custom_tdgclients_grid:nth-child(6n){background-color:rgb(216, 184, 133)!important;}
.custom_tdgclients_grid:nth-child(7n){background-color:rgb(201, 93, 93)!important;}
.custom_tdgclients_grid:nth-child(8n){background-color:#e8d2af!important;}

和Javascript：

$('.custom_tdgclients_grid:nth-child(2n)').css({'background-color':'rgb(232, 73, 73)'});
$('.custom_tdgclients_grid:nth-child(3n)').css({'background-color':'rgb(83, 71, 65)'});
$('.custom_tdgclients_grid:nth-child(4n)').css({'background-color':'#e8d2af'});
$('.custom_tdgclients_grid:nth-child(5n)').css({'background-color':'rgb(131, 119, 113)'});
$('.custom_tdgclients_grid:nth-child(6n)').css({'background-color':'rgb(216, 184, 133)'});
$('.custom_tdgclients_grid:nth-child(7n)').css({'background-color':'rgb(201, 93, 93)'});
$('.custom_tdgclients_grid:nth-child(8n)').css({'background-color':'rgb(181, 128, 101)'});

尝试从2n、`3n等中删除n…

如果不起作用，试着把他们和父母联系起来，比如：
#parent .custom_tdgclients_grid:nth-child(2)

希望它能起作用：）

我找到了修复此问题的代码。我会把它贴在这里给任何可能需要的人。我认为把他们和父母联系起来是关键！！

#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid {background-color: #a7948b;}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid { background-color: rgb(232, 73, 73);}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid { background-color: rgb(83, 71, 65);}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid {  background-color: #e8d2af;}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid { background-color: rgb(131, 119, 113);}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid {  background-color: rgb(216, 184, 133);}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid { background-color: rgb(201, 93, 93);}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid { background-color: #e8d2af;}

然后对JS端代码执行同样的操作。

相关文章：