css - 如何在 Joomla 3 中为一个模块添加多个模块类后缀？

Question

我想在 Joomla 3 中的模块中添加一些边 Angular 效果。我正在尝试添加边 Angular 标签，就像您在旧相册中看到的那样(我试图包含一个附件，但没有有足够的职位)。我使用模块类后缀来添加它们，因为我计划在各种不同大小的模块上使用它们，并希望它们能够正确定位，而不管模块恰好有多高或多宽。

但我只能让一个出现。如果我添加多个后缀，它会被忽略。

这是我在 Joomla 中用来添加它们的语法:

style-color badge-br badge-ul

“style-color”是显示模块背景和文本效果的样式。 “徽章-XX”表示每个 Angular 效果。 ul 是“左上角”，br 是“右下角”，等等。

这是我用于边 Angular 效果的 CSS:

.module .badge-ul {
background-position: 0 0px;
background-image: url(../images/texture/photo_corners.png);
top: -7px;
left: -7px;
height: 60px;
width: 60px;
z-index: 1001;    
}

.module .badge-ur {
background-position: 0 -60px;
background-image: url(../images/texture/photo_corners.png);
bottom: -7px;
left: -7px;
height: 60px;
width: 60px;
z-index: 1101;    
}

.module .badge-bl {
background-position: 0 -120px;
background-image: url(../images/texture/photo_corners.png);
bottom: -7px;
left: -7px;
height: 60px;
width: 60px;
z-index: 1201;    
}

.module .badge-br {
background-position: 0 -180px;
background-image: url(../images/texture/photo_corners.png);    
bottom: -7px;
right: -7px;
height: 60px;
width: 60px;
z-index: 1301;    
}

显然我遗漏了一些东西。但我不知道是什么。如果重要的话，我正在使用 YooTheme 模板(云)。

如有任何帮助，我们将不胜感激!

Answer 1

你不能那样做。每个 css 属性只能有一个值。 背景位置:0 0px； 背景位置:0 -180px； 背景位置:0 -120px； ... 每个 dom 元素可能只有一个背景位置。如果你想要 4 个背景，你需要 4 个 dom 元素 我建议您重新考虑创建背景的方式。