Question

我在滑块图片上使用了一些文字，我使用了一些技巧，但我在这里出了点问题是我的CSS和HTML：

CSS

.banner {float:left; width:100%; position:relative;}
.container {margin:0 auto; width:200px;}
.inban {float:left; width:100%; position:absolute; z-index:99; top:0px; left:0px;}

HTML

<div class="banner">
<img src="banner-1.jpg" alt="">
<div class="inban">
    <div class="container">
        Test text
    </div>
</div>

请告诉我如何在图片和容器中添加文字。

Answer 1

将图像作为包装div的背景图像放置会更容易，但在这种情况下，我将图像视为内容，因此属于HTML。我们将使用包装div作为绝对定位的容器。

<强> HTML

<div class="banner">
<img src="http://dummyimage.com/600x400/000/CCC" alt="">
<div class="inban">
    <div class="container image">
         <h2><span>A Movie in the Park:<span class='spacer'></span><br /><span class='spacer'></span>Kung Fu Panda</span></h2>
    </div>
</div>

<强> CSS

h2 span { 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px;  
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px; 
}

.image { 
position: relative; 
width: 100%; /* for IE 6 */
}

修复语义

当内联元素断开时，该块会在行中的最后一个字符后立即 ，并在下一行开始立即向左冲洗。在这种情况下，填充对我们没有帮助。

为了解决这个问题，我们将在
元素的任一侧应用更多的跨度来模拟填充。

$(function() { $("h2") .wrapInner("<span>") $("h2 br") .before("<span class='spacer'>") .after("<span class='spacer'>"); });

你可以找到有效的JSFiddle here

Answer 2

我得到了解决方案：

<强> CSS

.banner{float:left; width:100%;position:relative; text-align:center;}
.container{margin:0 auto; width:960px;}
.inban{ width:100%; position:absolute; left:0px; top:0px;}
img{max-width:100%; height:auto;}

<强> HTML

<div class="container">
<div class="banner">
<img src="banner-1.jpg" alt="">
<div class="inban">
        Test text
    </div>
</div>

我如何在幻灯片图片上添加文字

2 个答案: