懸停時更改圖像背景顏色

Question

請看下面這個例子，它的外觀：

請幫助我如何在懸停時更改圖像背景顏色，這是我的代碼，如您在上面的示例中看到的，顏色應該是透明的

 ul { list-style: none; } li { display: inline-block; } img { filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); width: 246px; height: 180px; } a:hover img { background: blue; } .text { font-size: 30px; color: #fff; position: absolute; z-index: 1; top: 0; padding-left: 10px; } 

 <div class="row"> <div class="col-lg-12"> <ul> <li> <div class="image"> <a href="#" title="Blog 7"><img src="http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 8"><img src="http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 9"><img src="http://mile.x3.rs/mile/hostel2hostel/img/typing.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> </ul> </div> </div> 

Answer 1

更改background上a標簽，而不是img 。 相應地調整color和opacity

a:hover {
     display:inline-block;    
     background: #4AFFFF;      
}
img:hover{
     opacity:0.5;
}

代替

a:hover img {    
  background: blue;
}

 ul { list-style: none; } li { display: inline-block; } img { filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); width: 246px; height: 180px; } a:hover { display:inline-block; background:#4AFFFF; } img:hover{ opacity:.5; } .text { font-size: 30px; color: #fff; position: absolute; z-index: 1; top: 0; padding-left: 10px; } 

 <div class="row"> <div class="col-lg-12"> <ul> <li> <div class="image"> <a href="#" title="Blog 7"><img src="http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 8"><img src="http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 9"><img src="http://mile.x3.rs/mile/hostel2hostel/img/typing.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> </ul> </div> </div> 

為了使它可以將鼠標懸停在文本上，請使用此代碼[ li是text和image父級，因此應該可以正常工作]

li:hover {    
    background: #4AFFFF;      
}
img:hover{
    opacity:0.5;
}

 ul { list-style: none; } li { display: inline-block; } img { filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); width: 246px; height: 180px; } li:hover { background: #4AFFFF; } img:hover{ opacity:0.5; } .text { font-size: 30px; color: #fff; position: absolute; z-index: 1; top: 0; padding-left: 10px; } 

 <div class="row"> <div class="col-lg-12"> <ul> <li> <div class="image"> <a href="#" title="Blog 7"><img src="http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 8"><img src="http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 9"><img src="http://mile.x3.rs/mile/hostel2hostel/img/typing.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> </ul> </div> </div> 

如果現在嘗試這樣做，您將在images下方看到gap 。 僅在stackoverflow可見。 當您直接在瀏覽器中運行此程序時，您將看不到任何內容。

我已經檢查過Chrome, Firefox and Opear ， images下方沒有gap

如果出於某些原因您確實看到了它。 您可以輕松地通過margin/padding調整

Answer 2

使用Alpha通道和負Z索引

• 首先 ，您需要選擇正確的元素： li:hover .image 。

• 其次 ，您需要使用rgba顏色來實現透明 。

   li:hover .image{ background: rgba(0, 255, 255, 0.5); } 

• 第三 ，將實際圖像向后推：

   img { position: relative; z-index: -1; } 

工作示例：

 ul { list-style: none; } li { display: inline-block; } img { filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); width: 246px; height: 180px; position: relative; z-index: -1; } li:hover .image{ background: rgba(0, 255, 255, 0.5); } .image a{ height: 180px; display: block; } .text { font-size: 30px; color: #fff; position: absolute; z-index: -1; top: 0; padding-left: 10px; } 

 <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> </head> <body> <div class="row"> <div class="col-lg-12"> <ul> <li> <div class="image"> <a href="#" title="Blog 7"><img src="http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 8"><img src="http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 9"><img src="http://mile.x3.rs/mile/hostel2hostel/img/typing.png"></a> </div> <div class="text"> <p>Lorem Ipsum</p> </div> </li> </ul> </div> </div> </body> </html> 

Answer 3

我能夠使用兩個div達到效果：

.a{
background-color:blue;width:100px; height:100px;}
.b{background-image:url("https://graph.facebook.com/1475846409390270/picture?type=large"); width:100px; height:100px;}
.b:hover{opacity:0.5;}


<a href="#"><div class="a"><div class="b"></div></div></a>

Answer 4

幾分鍾后，我在Google上閱讀了這篇文章，就對您的代碼進行了編輯，並產生了可行的結果： https ： //css-tricks.com/tinted-images-multiple-backgrounds/

結果是這樣完成的：

• 將圖像放置在CSS中，而不是作為<img>元素，因為作為一個元素，圖像將始終位於頂部，或者需要更復雜的圖層。
• 這樣做的缺點是，每張圖片都需要一套新的CSS規則（復制/粘貼），但每個規則都會關聯一個自定義圖片（針對每個按鈕鏈接）
• HTML進行了簡化，並且所有CSS都直接與錨鏈接關聯，圖像是錨鏈接CSS而不是子元素。
• 實際的顏色變化效果是通過在圖像中創建偽漸變而引起的，漸變是相同顏色之間的漸變，因此是均勻的。
• 我不能做這樣的工作，這種方式不使用偽梯度效應，即采用直板rgba()值，上codepen。

我的Codepen： http ：//codepen.io/anon/pen/vNoxoZ

我強烈懷疑這樣做有更好的方法。 但這似乎是您要尋找的。 通過添加opacity值可以顯示出更好的方式，如Akash Kumar的答案。

我的代碼：

  ul { list-style: none; } li { display: inline-block; } .anchorImage { filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); width: 246px; height: 180px; display:block; } .image1 { background:url('http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png'); } .image2 { background:url('http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png'); } .image3 { background:url('http://mile.x3.rs/mile/hostel2hostel/img/typing.png'); } .image1:hover { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(0, 0, 200, 0.45), rgba(0, 0, 200, 0.45) ), /* bottom, image */ url('http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png'); } .image2:hover { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(0, 0, 200, 0.45), rgba(0, 0, 200, 0.45) ), /* bottom, image */ url('http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png'); } .image3:hover { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(0, 0, 200, 0.45), rgba(0, 0, 200, 0.45) ), /* bottom, image */ url('http://mile.x3.rs/mile/hostel2hostel/img/typing.png'); } .text { font-size: 30px; color: #fff; position: absolute; z-index: 1; top: 0; padding-left: 10px; } 

  <div class="row"> <div class="col-lg-12"> <ul> <li> <div class="image"> <a class='anchorImage image1' href="#" title="Blog 7"></a> </div> <div class="text"> <p>Lorem Ipsum one</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 8" class="anchorImage image2"></a> </div> <div class="text"> <p>Lorem Ipsum two</p> </div> </li> <li> <div class="image"> <a href="#" title="Blog 9" class="anchorImage image3"></a> </div> <div class="text"> <p>Lorem Ipsum three</p> </div> </li> </ul> </div> </div> 

Answer 5

首先，您無法使用CSS（至少是基本的CSS屬性）更改圖片背景顏色，它是您可以更改的容器背景顏色，並且在HTML中，圖片具有更高的優先級，因此包含div ， ul和li的背景顏色可能根據您的CSS規則進行更改，但您將無法看到它。

我的意見：我認為您想要的效果是懸停在圖像上。 您可以具有一個隱藏的div，該div的透明屬性會使它看起來像覆蓋層，從而使其可見。

從CSS樣式中，您可能需要一些javascript

令人驚訝的是，您如此接近解決之道。 這是黑客

img {
  filter: brightness(100%);
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  -o-filter: brightness(100%);
  -ms-filter: brightness(100%);
  width: 246px;
  height: 180px;
}

a:hover img {
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
  -moz-filter: brightness(50%);
  -o-filter: brightness(50%);
  -ms-filter: brightness(50%);
}

而不是您的a:hover img {background: blue;}

注意：懸停只會影響img屬性，因此，如果將鼠標懸停在文本上，可能看不到任何疊加效果（不過，您可以編輯CSS使其起作用。）

Answer 6

你試過了嗎

a:hover img {  
    background: blue;
    background: transparent;
}