在图像上叠加文字不起作用
Overlaying text on image not working
我连续三张图片。图片中没有文字。这需要与代码一起添加。我使用了此处帖子中描述的方法(使用相对和绝对位置)并且它有些工作。这里是jsfiddle。有两个主要问题。
首先,位置不一致。如果调整 window 的大小,文本不会随图像一起移动。在智能手机上,文字会完全消失。
其次,当鼠标悬停在图像上时,它们会展开。但是如果鼠标移到文本上,扩展就会停止。如果我删除 z-index,那么当鼠标悬停在图像上时,文本就会消失。我想让文本始终显示,但也要扩展图像。我的代码如下。它取自示例 ,除了我添加的文本覆盖。是否可以将文本添加到更改的图像并使其按描述工作?
<style>
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
</style>
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
<div id="bannerText_0">Img 1</div>
<li id="1" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
<div id="bannerText_1">Img 2</div>
<li id="2" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
<div id="bannerText_2">Img 3</div>
</ul>
</div>
主要问题是 HTML 的结构不正确 - 您不能将 <div>
放在 <ul>
中的 <li>
元素之间。
除了导致布局损坏外,这也是鼠标悬停在文本上影响图像不起作用的原因 - 文本实际上不在具有悬停效果的 nav-item
元素内。
您可以通过将 div 放在 <li>
元素中来解决所有问题!
额外修复 :),我还修复了图像下方底部的 space - 只需将图像设为 display:block;
.
您的 Fiddle,更新了以下更改:https://jsfiddle.net/pcpg7zww/2/
工作代码段:
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
display:block; /* this will remove the space at the bottom */
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_0">Img 1</div>
</a>
</li>
<li id="1" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_1">Img 2</div>
</a>
</li>
<li id="2" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_2">Img 3</div>
</a>
</li>
</ul>
</div>
我连续三张图片。图片中没有文字。这需要与代码一起添加。我使用了此处帖子中描述的方法(使用相对和绝对位置)并且它有些工作。这里是jsfiddle。有两个主要问题。
首先,位置不一致。如果调整 window 的大小,文本不会随图像一起移动。在智能手机上,文字会完全消失。
其次,当鼠标悬停在图像上时,它们会展开。但是如果鼠标移到文本上,扩展就会停止。如果我删除 z-index,那么当鼠标悬停在图像上时,文本就会消失。我想让文本始终显示,但也要扩展图像。我的代码如下。它取自示例
<style>
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
</style>
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
<div id="bannerText_0">Img 1</div>
<li id="1" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
<div id="bannerText_1">Img 2</div>
<li id="2" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
<div id="bannerText_2">Img 3</div>
</ul>
</div>
主要问题是 HTML 的结构不正确 - 您不能将 <div>
放在 <ul>
中的 <li>
元素之间。
除了导致布局损坏外,这也是鼠标悬停在文本上影响图像不起作用的原因 - 文本实际上不在具有悬停效果的 nav-item
元素内。
您可以通过将 div 放在 <li>
元素中来解决所有问题!
额外修复 :),我还修复了图像下方底部的 space - 只需将图像设为 display:block;
.
您的 Fiddle,更新了以下更改:https://jsfiddle.net/pcpg7zww/2/
工作代码段:
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
display:block; /* this will remove the space at the bottom */
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_0">Img 1</div>
</a>
</li>
<li id="1" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_1">Img 2</div>
</a>
</li>
<li id="2" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_2">Img 3</div>
</a>
</li>
</ul>
</div>