Question

///我所指的文字是显示在我的图片滑块（Jquery cycle2）正下方的透明字幕框内的文字。文本似乎坚持我为盒子命令的不透明度。我也喜欢这个盒子跨越滑块的宽度，其中的文字居中，但现在我已经领先于自己了。我很乐意尝试向我提出的任何解决方案。我还在其他网站上提供了一个我想模仿的例子。

 http://sff-law.ca/.


Instead, I've only been able to create the following:

///

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Untitled Document</title>
   <style type="text/css">
   .cycle-slideshow, .cycle-slideshow * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   }


   /* overlay */
   .cycle-overlay {
    font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
    z-index: 800;
    background: black;
    color: #FFF;
    opacity: .1;
    overflow: hidden;
    position: absolute;
    top: 211px;
    font-size: 16px;
    font-weight: bold;
    right: auto;
    left: auto;
    clear: both;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    margin-left: 1px;
    font-style: italic;
   }
   </style>

   <script src="jquery.cycle2.caption2.min.js" type="text/javascript"></script>

   <script src="jquery.min.js" type="text/javascript"></script>

   <script src="jquery.cycle2.js" type="text/javascript"></script>


   </head>

   <body background="KAWARTHA LAW/Pics/6a00d83452719d69e2017d41a50bc6970c.jpg">
   <div id="back">
   <div class="cycle-slideshow" 

    data-cycle-timeout=2000
    >
    <!-- empty element for overlay -->
    <div class="cycle-overlay"></div>

    <img src="Slidding/buying.gif" 
        data-cycle-title="Contracts" 
        data-cycle-desc="">
    <img src="Slidding/last-will-and-testament-and-glasses.gif" 
        data-cycle-title="Corporate" 
        data-cycle-desc="">
    <img src="Slidding/last-will.gif" 
        data-cycle-title="Wills and more wills" 
        data-cycle-desc="">
    <img src="Slidding/Top-5-Reasons-to-have-a-Will-in-PA-02-08-12.gif" 
        data-cycle-title="Good Wills" 
        data-cycle-desc="">
   </div>
   </div>
   </body>
   </html>

Answer 1

如果你只需要这个用于较新的浏览器，你可以设置CSS使用RGBA值，然后文本将是不透明的（这将适用于IE9 +，Chrome，Firefox，Safari）：

.cycle-overlay{
     background-color:(0,0,0,.1);
}

如果您需要向后兼容的解决方案，可以创建一个具有所需透明度的1x1 PNG图像，并将其设置为背景。

如何使文字抵制透明度？

1 个答案: