大家好,我在使图像 + 翻转效果发挥作用时遇到了一些困难。 (我是编码新手)我想做什么:
我希望图像适合悬停“框”(以不透明度显示),其高度和宽度均为 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
最佳答案
如果图像小于可用位置,默认情况下背景图像会自行重复。要更改此设置,您可以使用 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)。这将使您获得更好的可维护性。
如果有什么不清楚的地方,请随时询问。
关于html - 悬停时图像 + 翻转淡入淡出的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41196844/