馬賽克jquery插件WordPress的深灰色文字

Question

我正在努力使馬賽克jQuery插件在wordpress中工作，直到現在我不得不使用iframe這是一種痛苦。

在wordpress中使用的問題是，文本是一個非常暗灰色，而不是白色。

它似乎看到的CSS和js文件似乎加載，我看到在鉻檢查元素控制檯沒有錯誤。

http://rise-sandbox1.co.uk/social-test-for-tudor/

CSS使用

<style type="text/css"> 
.clearfix: after; { 
content: " "; /* Older browser do not support empty content */ 
visibility: hidden; 
display: block; 
height: 0; 
clear: both; 
} 
.details{ margin:15px 20px; } 
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;   letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); } 
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#aaa; text- shadow:1px 1px 0 rgb(0,0,0);} 
a{ text-decoration:underline; } 

.mosaic-block { 
float:left; 
position:relative; 
overflow:hidden; 
width:400px; 
height:250px; 
margin:10px; 
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center center; 
border:1px solid #fff; 
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); 
} 

.mosaic-backdrop { 
    display:none; 
    position:absolute; 
    top:0; 
    height:100%; 
    width:100%; 
    background:#111; 
} 

.mosaic-overlay { 
    display:none; 
    z-index:5; 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:#111; 
} 
    .bar .mosaic-overlay { 
     bottom:-100px; 
     height:100px; 
     background:url(http://rise-sandbox1.co.uk/img/bg-black.png); 
    } 
</style> 

和JavaScript

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script></script> 
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>  
<script type="text/javascript"> 
     jQuery(function($){ 
      $('.bar').mosaic({ 
       animation : 'slide' 
      }); 
     }); 

    </script> 

我使用的是呼籲的文章和網頁特定的CSS/JavaScript的插件來實現代碼 其正常工作井 html

<div class="mosaic-block bar"> 
<a href="http://www.nonsensesociety.com/2011/01/sloppy-art/" target="_blank" class="mosaic-overlay"> 
<div class="details"> 
<h6>Sloppy Art - A Mess of Inspiration</h4> 
<p>via the Nonsense Society (image credit: Florian</p> 
</div> 
</a> 
<div class="mosaic-backdrop"> <img src="http://rise-sandbox1.co.uk/images/.jpg"/></div> 
</div>  
<div class="clearfix"></div> 
</div> 

希望有人能夠幫助這是推動我瘋了

Answer 1

好所有固定

的作品最終代碼

<div class="mosaic-block bar"> 
<div class="mosaic-overlay"> 
<div class="details"> 
<a href="http://rise-sandbox1.co.uk/collection/"> 
<h6>header text</h4> 
<p>View our latest Cashmere range of Baby Blankets</p></a> 
</div> 
</div> 
<div class="mosaic-backdrop"> 
<img src="http://rise-sandbox1.co.uk/images/picture.jpg"> 
</div>  
</div> 

和CSS與JavaScript

<style type="text/css"> 
.mosaic-overlay .details{ margin:15px 20px; } 
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;  letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); } 
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#fff; text- shadow:1px 1px 0 rgb(0,0,0);} 
a{ 
color: #fff; 
text-decoration:none; } 

.mosaic-block { 
float:left; 
position:relative; 
overflow:hidden; 
width:460px; 
height:300px; 
margin:10px; 
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center center; 
border:1px solid #fff; 
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); 
} 

.mosaic-backdrop { 
    display:none; 
    position:absolute; 
    top:0; 
    height:100%; 
    width:100%; 
    background:#111; 
} 

.mosaic-overlay { 
    display:none; 
    z-index:5; 
    position:absolute!important; 
    width:100%; 
    height:100%; 
    background:#111; 
} 
    .bar .mosaic-overlay { 
     bottom:-100px; 
     height:100px; 
     background:url(http://rise-sandbox1.co.uk/img/bg-black.png); 
    } 
</style> 
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/wp-includes/js/jquery/jquery.js"></script></script> 
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>  
<script type="text/javascript"> 
jQuery(function($){ 
$('.bar').mosaic({ 
animation : 'slide' 
}); 
    }); 

</script>