[英]CSS overlay effect is disturbing CSS text on image
我需要使用CSS在图像上显示文本。 我正在使用H2标签:
<h2 class="post-message">Test</h2>
这是CSS的代码:
.post-message {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
但叠加效果搞砸了,这里是代码:
.overlay{
overflow: hidden;
background: #000;
}
.overlay img{
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.overlay:hover img{
-webkit-transform: scale(1.2) rotate(-5deg);
-moz-transform: scale(1.2) rotate(-5deg);
-o-transform: scale(1.2) rotate(-5deg);
-ms-transform: scale(1.2) rotate(-5deg);
transform: scale(1.2) rotate(-5deg);
opacity: 0.7;
}
我不知道如何解释发生了什么,我上传了2个屏幕:
一个小红色箭头将显示第二张图像上发生的情况。 帮助会很棒! 我尝试了所有可能的事情,专家意见总是最好的解决方案。 提前致谢!
<div class="post-thumbnail overlay">
<a href="http://example.com/comey-wikileaks/">
<img src="http://example.com/wp-content/uploads/2017/04/comey-825x510.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510">
</a>
<h2 class="post-message">Test</h2>
</div>
img
有一个“替换内容”布局模型,基本上被视为内联元素,默认情况下底部空间包含空格,因此img
底部和底部之间会有一个小空间img
的容器。 要删除底部的间隙,请使用img
display: block
或使用vertical-align: top
。
如果图像旋转到目前为止你看到它的角落在底部/右角,要么增加你的scale()
,要么不要旋转那么多,直到你再也看不到它为止。 我没有看到你提供的代码。
.post-message { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: white; margin: 0; font: 14px Sans-Serif; } .overlay { overflow: hidden; background: #000; } .overlay img { -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; } .overlay:hover img { -webkit-transform: scale(1.2) rotate(-5deg); -moz-transform: scale(1.2) rotate(-5deg); -o-transform: scale(1.2) rotate(-5deg); -ms-transform: scale(1.2) rotate(-5deg); transform: scale(1.2) rotate(-5deg); opacity: 0.7; } img { vertical-align: top; }
<div class="post-thumbnail overlay"> <a href="http://example.com/comey-wikileaks/"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510"> </a> <h2 class="post-message">Test</h2> </div>
你实际上可以把你的img
和你的<h2>
放在一个<div>
,让整个<div>
旋转....
以下是您编写的内容的示例:
(显然,有一些事情要重新调整,但它或多或少都是你想要的,我猜^^)
.post-message { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: white; margin: 0; font: 14px Sans-Serif; } .overlay{ overflow: hidden; background: #000; /*these two lines are new*/ display:inline-block; position:relative; } /*I apply style directly on the "overlay"*/ .overlay /*img*/{ -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; } .overlay:hover /*img*/{ -webkit-transform: scale(1.2) rotate(-5deg); -moz-transform: scale(1.2) rotate(-5deg); -o-transform: scale(1.2) rotate(-5deg); -ms-transform: scale(1.2) rotate(-5deg); transform: scale(1.2) rotate(-5deg); opacity: 0.7; }
<span class="overlay"> <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> <h2 class="post-message">Test</h2> </span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.