将文本放在幻灯片放映的框内

Question

目前幻灯片放映中的一张图片（使用unslider.js）在word press中如下所示：

每张图片的html都是这样的：

 <li style="background-image: url('<?php echo get_template_directory_uri();?> /images/photos/pearl2.jpg');">

         <h1>The jQuery slider that just slides2 2.</h1>
             <p>No fancy effects or unnecessary markup, and it’s less than 3kb. 2</p>
             <a class="btn" href="#download">Download</a>

         </li>

现在我打算做的是将h1，p和一个锚放在图像右侧的方框上，但我很难弄清楚如何去做。我发现unslider有完整的选项可以用来做这种事情，但不知道如何使用它。关于我应该研究的相同建议吗？

目前的css：

body.page-id-7 .banner {
    position: relative;
    width: 100%;
    overflow: hidden;

    font-size: 18px;
    line-height: 24px;
    text-align: center;

    color: rgba(255,255,255,.6);
    text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);

    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

body.page-id-7  .banner ul {
        list-style: none;
        width: 300%;
    }


body.page-id-7  .banner ul li {
        display: block;
        float: left;
        width: 33%;
        padding: 160px 0 110px;

        min-height: 400px;

    -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        -ms-background-size: 100% 100%;
        background-size: 100% 100%;

        box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
    }
/*body.page-id-7 .banner .placing {position:absolute; background:#ccc; padding:10px; right:0; bottom:0}*/
body.page-id-7  .banner h1, .banner h2 {
        font-size: 40px;
        line-height: 52px;

        color: #fff;
    }

Answer 1

您必须在li的背景中删除此处<li style="background-image: url('<?php echo get_template_directory_uri();?> /images/photos/pearl2.jpg');">的图像。 并尝试一些不同的标记和CSS，例如将div放在li内，并将float left和h1,p,anchor的图片放到float right。

Answer 2

您需要处理CSS，尝试将以下样式应用于<li>： -

li {
  text-align: right;
}

Answer 3

你可以试试这个..

小提琴：click here

<div style="position:absolute; background:#ccc; padding:10px; right:0; bottom:0">
         <h1>The jQuery slider that just slides2 2.</h1>
         <p>No fancy effects or unnecessary markup, and it’s less than 3kb. 2</p>
         <a class="btn" href="#download">Download</a>
</div>