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

So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?

所以此刻，我在链接后面有一个div，我将div背景设置为特定图像，我希望当悬停在该div上时会出现相同的图像，但内部周围会出现阴影对于盒子，我有两个图像与我，但我似乎无法找到一种方法来保持“家庭”背景图像与“家庭：悬停”背景图像相同，但也有阴影框，我会喜欢这样做而不必单独将阴影放在photoshop中的背景图像上..任何想法？

Here's the CSS:

这是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;
 }

Thanks!

谢谢！

1 个解决方案

#1

I would recommend using this code:

我建议使用此代码：

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

As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.

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

#1