Question

所以此刻，我在链接后面有一个div，我将div背景设置为特定图像，并且我想在将鼠标悬停在该div上时显示相同的图像，但会出现阴影在盒子的内部，我有两个图像，但我似乎无法找到一种方法来保持“Home”背景图像与“Home：hover”背景图像相同，但也使用阴影框，我想这样做而不必单独将阴影放在photoshop中的背景图像上......任何想法？

这是CSS：

  #Home {
     z-index: 4;
     position: absolute;
     top: 0px;
     left: 707px;
     width: 95px;
     height: 64px;
     margin: 0;
     background: url(../images/button%20texture%20b.jpg) center;
     border-style: solid;
     border-width: 1px;
     border-color: #7F7F7F;
 }

 #Home:hover {
     width:95px;
     background: url(../images/button%20overlay%20b.png) ;
     background-size: cover;
 }

     #Home:hover {
     width: 95px;
     background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
     background-size: cover;
 }

谢谢！

Answer 1

我建议使用此代码：

#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }

正如您可以阅读here，您实际上可以为元素分配多个背景图像。所述的第一张图像将位于顶部，第二张图像位于第一张图像之下，依此类推。

使用Div：hover时保留Div父背景图像

1 个答案: