텍스트를 투명하게 만드는 방법은 무엇입니까?

/// 내가 말하는 텍스트는 내 그림 슬라이더 (Jquery cycle2) 바로 아래에 표시되는 투명 캡션 상자 안의 텍스트입니다. 텍스트는 내가 상자에 대해 지시 한 불투명도를 고수하는 것으로 보입니다. 슬라이더의 너비와 그 안에있는 텍스트를 중앙에 배치하는 상자를 원하지만 현재는 나 자신보다 앞서 가고 있습니다. 나에게 제안 된 해결책을 시도해 봤으면 좋겠다. 나는 또 다른 웹 사이트의 예를 포함하여 Im이 모방하려는 것을 포함 시켰습니다. 당신은 단지 새로운 브라우저이 필요한 경우텍스트를 투명하게 만드는 방법은 무엇입니까?

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 +, 크롬에서 작동합니다 (불투명합니다 파이어 폭스, 사파리) : 당신은 이전 버전과 호환 솔루션을 필요로하는 경우

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

, 당신은 당신이 원하는 투명도와 이미지를 PNG 1x1 크기를 만들 수 있습니다, 그 설정 배경으로.

출처

2014-04-07 13:21:37 Bryan

감사합니다. Bryan. 나는 0,0,0, .65을 사용했다. – user3501561

텍스트를 투명하게 만드는 방법은 무엇입니까?

답변

관련 문제