Question

我正在尝试删除图像的灰色轮廓。我看到该大纲意味着错误，因为图像标签没有源属性。但如果我添加src="image.jpg"，则悬停不起作用。

如何解决？太困惑了......

这是我的代码

#item1 {
  background-image: url('cushion01.jpg');
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
#item1:hover {
  background-image: url('cushion-01.jpeg');
  height: 300px;
  width: 300px;
}

<div class="secondary__item" style="width: 100%; height : 850px;">
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item1"  src="image.jpg" />
    </li>
    <li class="item-image">
      <img class="item" id="item2" />
    </li>
  </ul>
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item3" />
    </li>
    <li class="item-image">
      <img class="item" id="item4" />
    </li>
  </ul>
</div>

Answer 1

奇怪的是，您正尝试将背景设置为<img>标记。如果我是你，我会使用<div>代替。那会非常简单：

HTML：

    <div class= "secondary__item" style="width: 100%; height : 850px;">
        <ul class="item-images">
        <li class="item-image"><div class="item"  id="item1" ></div></li>
            <li class="item-image"><div class="item"  id="item2" ></div></li>
        </ul>
        <ul class="item-images">
            <li class="item-image"><div class="item"  id="item3" ></div></li>
            <li class="item-image"><div class="item"  id="item4" ></div></li>
        </ul>
    </div>

CSS：

.item {
height:300px;
width :300px;
background-repeat: no-repeat;
background-size : cover;

/*you can remove it*/
border: 1px solid;
}
.item:hover {
background-image: url('http://shushi168.com/data/out/114/36276270-image.png');
height:300px;
width :300px;
}

这是一个小提琴：https://jsfiddle.net/7kzu5qcy/2/

Answer 2

您是否尝试过而不是使用ID来使用主标识符？

像...

.item-image IMG {
 border:none;
}

Answer 3

将其放入您的图片代码

alt=""

Answer 4

试试这个：

item1:hover {
    border: none !important;
    display: block;
}

Answer 5

您可以使用margin＆amp; CSS的overflow属性。

这样的事情：

/* Image Container (Parent) */
.item-image {
  width: 298px;
  height: 298px;
  overflow: hidden;
}

/* Image (Child) */    
.item-image img {
  margin: -1px;
  background: #eee; /* To show the area covered by image */
}

查看下面的代码段（我已将背景颜色应用于图片以显示图片区域）：

＆＃13;

#item1 {
  background-image: url('cushion01.jpg');
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
#item1:hover {
  background-image: url('cushion-01.jpeg');
  height: 300px;
  width: 300px;
}

.item-image {
  width: 298px;
  height: 298px;
  overflow: hidden;
}

.item-image img {
  margin: -1px;
  background: #eee;
}

＆＃13;

<div class="secondary__item" style="width: 100%; height : 850px;">
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item1"  src="image.jpg" />
    </li>
    <li class="item-image">
      <img class="item" id="item2" />
    </li>
  </ul>
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item3" />
    </li>
    <li class="item-image">
      <img class="item" id="item4" />
    </li>
  </ul>
</div>

＆＃13;

希望这有帮助！

Answer 6

我看到chrome/safari display border around image给出了答案。

The reason cited is <img> tag does not have proper value in src attribute.

如何在html中删除悬停图像的轮廓

6 个答案: