我在滚动框内有一些图像,我需要一些文字覆盖该图像。 图片数量可以是动态的,它不需要6个数字,并且它们必须处于水平滚动而不是垂直。以下是我的代码,
<style type="text/css">
.imgtext {
margin-left: -300px;
}
</style>
<div id="hcontainer" style="width: 600px;">
<div id="inner_container" style="overflow: auto; width: 2500px;">
<img src="1.jpg" width="400px" height="200px" /><span class="imgtext">My new_1 text</span>
<img src="2.jpg" width="400px" height="200px" /><span class="imgtext">My new_2 text</span>
<img src="3.jpg" width="400px" height="200px" /><span class="imgtext"> My new_3 text</span>
<img src="4.jpg" width="400px" height="200px" /><span class="imgtext"> My new_4 text</span>
<img src="5.jpg" width="400px" height="200px" /><span class="imgtext">My new_5 text</span>
<img src="6.jpg" width="400px" height="200px" /><span class="imgtext">My new_6 text</span>
</div>
</div>
正如您所看到的那样,文字正在覆盖图像,但图像因此而崩溃,这看起来并不好看。我已经研究了相对父级定位和绝对子级定位的解决方案,但我不允许修改div style / css属性。因此,使用div风格的绝对和相对解决方案是行不通的!我可以和img
&amp; span
标签和css属性。
我可以使用jquery / javascript来移动文本并将其放在相应的图像上。但是我自己无法解决这个问题。任何人都可以帮我吗?
答案 0 :(得分:1)
使用background-image
(如果可以):
所以而不是:
<img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>
使用:
<div class="img img_1">My new_1 text</div>
使用CSS:
.img{
background-repeat:no-repeat;
width:400px;
height:200px;
}
.img.img_1{
background-image:url(1.jpg);
}
如果您有图像路径的动态数据,则可以将这些数据包含在style
属性中:
<div class="img" style="background-image:url(1.jpg)">My new_1 text</div>
答案 1 :(得分:1)
以下是一个很好的例子:https://css-tricks.com/text-blocks-over-image/
<强> HTML 强>
<div class="image-wrap">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<span>A Movie in the Park:<br />Kung Fu Panda</span>
</div>
<强> CSS 强>
.image-wrap {
position: relative;
width: 100%; /* for IE 6 */
}
.image-wrap > span {
position: absolute;
top: 175px;
left: 0;
width: 100%;
display:block;
}
您确保图像样式不会发生冲突,然后应用绝对位置并将文本范围偏移到您想要的任何位置(根据需要更改顶部和左侧)
我做了一个小提示:
jsfiddle :https://jsfiddle.net/dabros/me0j4opp/
此外,这些帖子回答了类似的问题:
Z-Index问题:CSS Text over image
鼠标事件:How to display text over image
修改强>
发表评论后。滚动条到这篇文章我更新了我的小提琴,并添加了一些应该帮助的链接
这是改变的css:
.image-wrap {
position: relative;
width: 400px;
display:inline-block;
}
.image-wrap > span {
position: absolute;
top: 175px;
left: 10px;
width: 100%;
display:block;
z-index:99;
}
至于链接,标题很好地解释了它们
Hiding the scrollbar on an HTML page
Hide scroll bar, but still being able to scroll
https://css-tricks.com/forums/topic/hide-vertical-scrollbar-but-still-scrollable/
答案 2 :(得分:0)
<div id="hcontainer" style="width: 600px;">
<div id="inner_container" style="overflow: auto; width: 2500px;">
<div><img src="http://www.abload.de/img/die_farbe_rot9ebr.jpg" width="400px" height="200px" /><span>My new_1 text</span><div>
</div>
</div>
span{
position:absolute;
left:0px;
}
div{
position:relative;
}
答案 3 :(得分:0)
答案 4 :(得分:0)
请检查代码并告诉我们:)
$(document).ready(function() {
$('#inner_container img').each(function() {
var imgHeight = $(this).height(),
imgwidth = $(this).width(),
imgPositionTop = $(this).offset().top,
imgPositionLeft = $(this).offset().left;
$(this).next('span').css({
'width': imgwidth,
'height': imgHeight,
'position': 'absolute',
'top': imgPositionTop,
'left': imgPositionLeft
});
});
});
#inner_container span {
background: rgba(0, 0, 0, .8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="hcontainer" style="width: 600px;">
<div id="inner_container" style="overflow: auto; width: 2500px;">
<img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>
<img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span>
<img src="3.jpg" width="400px" height="200px" /><span>My new_3 text</span>
<img src="4.jpg" width="400px" height="200px" /><span>My new_4 text</span>
<img src="5.jpg" width="400px" height="200px" /><span>My new_5 text</span>
<img src="6.jpg" width="400px" height="200px" /><span>My new_6 text</span>
</div>
</div>