Question

所以我有一个特定的代码用于悬停效果，这些按钮会导致我提出的wiki上的某些类别。您可以看到这些按钮here。 （您可以点击“修改”以查看该页面上的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个按钮的中心。问题是我正在使用的类当然将所有这些函数都放在所有使用的图像上。

我想找到一种方法将特定图像放在按钮的中心，而不会移动按钮等......就像背景图像一样（如果需要，可能会在按钮后面）。

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中创建整个元素设置。现在它将自动将图像置于所有元素的边界框中间。所有这些都是由一个类驱动图像，当你用它们覆盖它们时使用以下代码：

.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

请注意，这可能看起来很合乎逻辑，或者已经在千篇文章中得到了解答，但在我的情况下，目的是让背景图像正好位于特定元素设置的中间，以便与多个功能悬停一起工作按钮，而不是只有一个平铺图像。

在另一个类之间添加背景图像仅用于审美目的

1 个答案: