仅出于美观目的在另一个 class 之间添加背景图片

Question

所以我有一个特定的代码，用于在我提出的 wiki 上导致按钮上的某些类别的悬停效果。您可以看到那些按钮 here。 （您可以点击 'edit' 查看该页面上的 HTML。）

这是我为此使用的代码

.helpmodule 
img:hover { 
-moz-opacity: .8; 
-khtml-opacity: .8; 

background-image: url(vignette3.wikia.nocookie.net/zombieescape/images/3/32/…); 
background-position: center; 
opacity: .8; 
width: 200px; 
height: 200px; 
}

基本上，除了一件小事外，所有代码都能满足我需要的一切：背景图像，您可以 find here。此图像需要放在这 9 个按钮的中心。问题是我正在使用的class，当然，将所有这些功能应用于所有使用的图像。

我想找到一种方法，让特定图像位于按钮的中央，而不会将其移开按钮等...就像背景图像一样（如有必要，可能会出现在按钮后面）。

Answer 1

好的，我设法得到了我想要的确切结果。您需要做的是首先创建一个具有背景图片的ID，在本例中代码为：

#buttons-navigator-body { 
    background-image: url(insert your url here);
    background-repeat: no-repeat, no-repeat;
    background-position: center;
}

您现在添加一个<div id="buttons-navigator-body"></div> 然后，您可以在此 ID 中创建整个元素设置。它现在会自动将图像居中放置在所有元素的边界框中间。所有这些都由一个 class 驱动，当您使用以下代码浏览图像时，它会悬停在图像上：

.buttons-navigator-hover img:hover {
  -moz-opacity:     .8;
  -khtml-opacity:   .8;
  opacity:          .8;
  width:            200px;
  height:           200px;
}

结果可以在这里看到：http://zombieescape.wikia.com/wiki/Zombie_Escape_Wiki

请注意，这可能看起来非常合乎逻辑，或者已经在数千个帖子中得到了回答，但就我而言，目的是让背景图像恰好位于特定元素设置的中间，以便与多个元素一起工作功能悬停按钮，而不是只有平铺图像。

仅出于美观目的在另一个 class 之间添加背景图片

Add background image in between another class for aesthetic purposes only

css

wiki

background

class