Question

请看一下它的外观示例： Hover over image to change colour

请帮我看看如何在悬停时更改图像背景颜色，这是我的代码，正如您在上面的例子中看到的，颜色应该是透明的

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

更改background代码上的a而不是img。调整color＆amp; opacity因此

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

而不是

a:hover img {    
  background: blue;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

要将其悬停在文字上，请使用此代码[li为text和image的父级，以便它可以正常工作]

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您现在尝试此操作，则会在gap下方看到images。它只能在stackoverflow上查看。当您在浏览器中直接运行它时，您将看不到它。

我已与Chrome, Firefox and Opear核对gap以下images

如果由于某种原因你确实看到了它。您可以使用margin/padding

轻松调整它

Answer 2

使用alpha通道和负z-index

首先，您需要选择正确的元素：li:hover .image。

其次，您需要使用rgba颜色来实现透明度。

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

第三次，将实际图片推到后面：

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

工作示例：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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而不是子元素。
实际的颜色变化效果是由图像中的伪渐变引起的，渐变是从相同的颜色到相同的颜色，因此是均匀的。
我无法以这种方式工作没有使用伪梯度效果，即在codepen上使用直接rgba()值。

我的代码：http://codepen.io/anon/pen/vNoxoZ

我强烈怀疑有更好的方法可以做到这一点。但这似乎是你在寻找的。 通过添加opacity值来显示更好的方式，如在Akash Kumar的答案中所示。

我的代码：

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 5

首先，您无法使用CSS更改图像背景颜色（至少是基本的CSS属性），它是您可以更改的容器背景颜色，而在HTML中，图像具有更高的优先级，因此包含{{1 }}，div，ul可能会随着您的CSS规则而改变，但您将无法看到它。

我的观点：我认为您想要的效果是悬停时图像上的叠加效果。你可以拥有一个隐藏的div，它将具有略微透明的属性，使其看起来像叠加。

从CSS样式中，您可能需要一些javascript

太棒了你是如此接近以自己的方式修复它。这是黑客

li

而不是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%); }

注意：悬停只影响img属性，因此如果将鼠标悬停在文本上，则可能看不到任何叠加效果（您可以编辑CSS以使其工作。）

Answer 6

你试过吗

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

在悬停

6 个答案:

使用alpha通道和负z-index

工作示例：