如何让文字抵制透明度？

///我指的是显示在我的图片滑块（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>

来源

2014-04-05 user3501561

可能想定义您的问题多一点，以避免倒票。提供透明度的CSS属性是'opacity：.1;'不透明度范围从0.0（完全透明）到1.0（完全不透明）。http://www.w3.org/wiki/CSS/Properties/opacity – Scott

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

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

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

来源

2014-04-07 13:21:37 Bryan

谢谢Bryan。我用0,0,0，.65 – user3501561

如何让文字抵制透明度？

回答

相关问题