更改背景顏色和背景圖像

Question

我想在懸停時更改div背景顏色和圖像。 像這樣。

我嘗試過這種方式。 但是它只改變了背景色。 有什么辦法可以解決這種情況？

<div class="col-md-4">
  <div class="icon-wrapper"></div>
     <p>Products</p>
</div>

.icon-wrapper {
    background: url("/assets/human-resources.png");
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    height: 120px;
    position: relative;
    width: 120px;
    border-radius: 50%;
    transition: all 0.2s;

    img {
        top: 22%;
        left: 24%;
        position: absolute;
    }

    &:hover {
        background: blue;
        background-position: center;
        background-repeat: no-repeat;
        background: url("/assets/car-white.png");
    }
}

Answer 1

background-color: #6DB3F2;
background-image: url('images/checked.png');

您可以嘗試使用它來代替

background: #6DB3F2 url('images/checked.png');

Answer 2

我不知道您網站的所有布局，但是我可以告訴您有關彈出式窗口的簡短介紹-如何以正確的方式創建彈出式窗口。

首先，在所有其他div塊之外，為背景蒙版創建另一個（在html中的最后一個div塊元素與body標記之間）-它僅用作背景層（具有絕對位置），根據需要設置樣式並設置為不顯示隱藏它。

然后為彈出窗口創建另一個div塊（不在背景塊內部，而是在其下，固定位置以與頁面一起滾動），創建彈出窗口並按需要設置樣式，也將其隱藏（不顯示）。

這將為您提供可重復使用的彈出結構，之后您只需使用第一個添加新的彈出塊等即可使用所需的次數。

我知道這只是一個沒有實際例子的理論，因此您可以在這里進行一些研究（關於結構，可以更簡單地使用jQuery）：

可重復使用的模式彈出窗口

PS回答您的問題：

您需要更改背景顏色和背景圖像（處於懸停狀態）。 :)

Answer 3

以我的理解，您正在嘗試更改懸停時的背景圖片和背景顏色，對嗎？ 嘗試這個：

yourElement:hover{
   background-color: yellow;
   background-image: url(../images/bg.gif);
}

Answer 4

示例1：表格行背景顏色的變化

<table>
    <tr  bgcolor="#777777">
        <td>Content Write here...</td>
    </tr>
</table>

示例2：如果更改背景圖像，則使用此代碼

<div style="background-image: url('bg.jpg');"></div>

Answer 5

因為您在懸停選擇器上覆蓋了背景，這是正常情況。 試試background-color:blue; 懸停選擇器