在图像上放置文本

Posted 2023-03-06

【中文标题】在图像上放置文本

【英文标题】：Placing text over images

【发布时间】：2014-09-24 11:25:03

【问题描述】：

我正在使用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>

我还想在滑块中的图像上放置一些文本。每个图像的唯一文本。如何使用 owl-carousel 做到这一点？

【问题讨论】：

请拿出你的小提琴

【参考方案1】：

请在此处查看DEMO

<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

.owl-carousel div h2, .owl-carousel div .textoverlay
    position:absolute;
    color:#FFF;
   font-size:12px;
   display:block;

我使用 DIV 检查 owl-carousel 来定义拇指滚动，这意味着您可以轻松自定义它。 （链接因垃圾邮件而被删除）

希望对你有帮助:)

【讨论】：

你的链接感染病毒... [注意]

演示不起作用。有没有机会提供一个可行的例子？