Question

大家好，所以我在制作图片+翻转效果方面遇到了一些困难。（我是编码的新手）我想做的是：

我希望图片适合悬停＆＃39;框？（以不透明度显示），其高度和宽度为100％。图像也应该是280px x 280px，但看起来比那个大，并且在它的分配空间内也是平铺或重复？任何人都可以看到我可能做错了吗？

PS - 还有其他2件特色作品＆＃39;它将显示在您上面看到的那个旁边，并且将与第一个格式相同...因此下面是重复的段落和图像标记。这些图像一旦被悬停就应该充当整个链接，但到目前为止，这个动作似乎只适用于文本：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;
}

...修复了图像定位/尺寸，但现在叠加层没有生效。见：screenshot2

attached: screenshot2

Answer 1

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

我将举例说明如何实现所描述的效果：

＆＃13;

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

＆＃13;

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

＆＃13;

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

悬停时图像+滚动淡出的问题

1 个答案: