html - 悬停时图像 + 翻转淡入淡出的问题

Question

attached: screenshot

大家好，我在使图像 + 翻转效果发挥作用时遇到了一些困难。 (我是编码新手)我想做什么:

我希望图像适合悬停“框”(以不透明度显示)，其高度和宽度均为 100%。该图像也应该是 280 像素 x 280 像素，但看起来比那个大，并且还在分配的空间内平铺或重复？谁能看出我做错了什么？

PS - 还有 2 个“特色作品”会出现在您上面看到的旁边，并且格式与第一个相同...因此下面有重复的段落和图像标签。一旦将这些图像悬停在上面，这些图像就应该充当一个完整的链接，但到目前为止，这个 Action 似乎只适用于文本:Vital Voices |事件...(请查看屏幕截图)

不过，我更关心图像是否与悬停/覆盖对齐。

这是 CSS:

img {
margin-top: 5px;
padding: 10px;
float: left;    
}

.picture {
width: 280px;
height: 280px;
background: url(".png");
padding: 20px;
float: left;
}


.overlay {
width: 100%;
height: 100%;
background: url("../images/opacity.png");
display: none;
padding: 10px;
text-align: center;
font-weight: bold;
font-family: Baskerville;
font-size: 20px;
}

.picture:hover .overlay {
display: block;
}

.clearfloat {
clear: both;    
}

这是 HTML:

<div id="wrapper">

<h1>Featured Works</h1>

<p><a href="branding.html" src="images/VV_2.png"><div class="picture" style="width: 280px; height: 280px; background: url('images/VV_2.png');"><div class="overlay">Vital Voices | Campaign</div></div></a></p>

<p><a href="typography.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Quote Poster | Typography</div></div></a></p>

<p><a href="marketing.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Coffee | Marketing</div></div></a></p>

<div class="clearfloat"></div> 

</div> <!--closes wrapper div-->

----------------更新:

<p><a href="branding.html"><img src="images/VV_2.png" width="280px" height="280px" alt="vital voices preview image" class="preview"></a></p><div class="overlay">Vital Voices | Campaign</div>

^ 将 html 代码更改为类似这样的内容...并将 CSS 更改为:(将图片更改为预览，保持覆盖信息相同)

.preview {
width: 280px;
height: 280px;
padding: 20px;
float: left;
}

.preview:hover .overlay {
display: block;
}

...修复了图像定位/大小，但现在覆盖不生效。见:截图2

attached: screenshot2

Answer 1

如果图像小于可用位置，默认情况下背景图像会自行重复。要更改此设置，您可以使用 background-repeat 属性并将其设置为 no-repeat。然后背景将从左上角开始，不会重复。要使背景居中，您必须使用 background-position 属性并将其值设置为 center。

我将给出一个通用示例来说明如何实现所描述的效果:

.work a {
  position: relative;
  float: left;
  margin-right: 20px;
  width: 180px;
  height: 180px;
}

.work .title {
  display: none;
  position: absolute;
  width: 100%;
  padding: 5px 0;
  margin-top: 15px;
  text-align: center;
  background: rgba(255,255,255,0.5);
}

.work:hover .title {
  display: block;
}

<h1>Featured Works</h1>

<div class="work">
  <a href="#">
    <span class="title">Vital Voices | Campaign</span>
    <img src="http://lorempixel.com/180/180/abstract/3/">
  </a>
</div>

<div class="work">
  <a href="#">
    <span class="title">Quote Poster | Typography</span>
    <img src="http://lorempixel.com/180/180/abstract/4/">
  </a>
</div>

一个小提示:只要不需要，就避免使用内联 CSS(= HTML 的 style 属性中的 CSS)。这将使您获得更好的可维护性。如果有什么不清楚的地方，请随时询问。