jQuery 在图像上放置文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25077156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing text over images
提问by saplingPro
I am using owl-carouselto make a sliderfor a website. I could easily make a slider using the following code :
我正在使用owl-carousel制作slider一个网站。我可以使用以下代码轻松制作滑块：
<div id="owl-slider" class="owl-carousel">
<div> <img src="images/1.jpg" /> </div>
<div> <img src="images/2.jpg" /> </div>
<div> <img src="images/3.jpg" /> </div>
<div> <img src="images/4.jpg" /> </div>
</div>
<script type="text/javascript">
$("#owl-slider").owlCarousel({
items : 1,
autoPlay : true,
slideSpeed : 200,
stopOnHover : true,
navigation : false
})
$(document).ready(function() {
$("#owl-slider").owlCarousel();
});
</script>
I also want to place some text on the images in the slider. Unique text for each image. How can I do this with owl-carousel ?
我还想在滑块中的图像上放置一些文本。每个图像的唯一文本。我怎么能用 owl-carousel 做到这一点？
回答by ilovebali
Please check DEMOhere
请在此处查看演示
<div id="owl-slider" class="owl-carousel">
<div> <div class="textoverlay"><h1>Text 1</h1><p>Some text bla bla bla</p></div><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" /></div>
<div> <h2>Text 2</h2><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" /> </div>
<div><h2>Text 3</h2> <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl8.jpg" /> </div>
<div> <h2>Text 4</h2><img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" /> </div>
CSS
CSS
.owl-carousel div h2, .owl-carousel div .textoverlay{
position:absolute;
color:#FFF;
font-size:12px;
display:block;
}
I check owl-carousel using DIV to define the thumb scroll, it mean you can easy to customize it. (Link removed due to SPAM)
我使用 DIV 检查 owl-carousel 来定义拇指滚动，这意味着您可以轻松自定义它。（链接因垃圾邮件而删除）
Hope that help you :)
希望对你有帮助:)
