使用JQuery和CSS在圖片上疊加文本？

我正在使用Jquery和css在圖像上疊加文本。疊加文字在圖像上顯示效果良好。但我正在嘗試更改文本字體和大小。我試圖改變CSS的字體家族和一切。但它沒有任何影響。請看我做了什麼代碼。使用JQuery和CSS在圖片上疊加文本？

在CSS文件：

#container { 
    width: 100px; 
    text-align: center; 
    margin: auto; 
} 

.back 
{ 
    position:absolute; 
    top:0;left:0; 
} 
.wrap 
{ 
    width:100px; 
    height:100px; 
    position:relative; 
    margin:auto; 
    overflow:hidden; 
} 

.comment 
{ 
    position:absolute; 
    width:100px; 
    top:100px; 
    left:0px; 
    letter-spacing: -1px; 
    color: white; 
    font-family:"Bookman Old Style", "Book Antiqua", Garamond; 
    font-size:100%; 
    background: #4A4D4A; 
    padding: 10px; 
    filter:alpha(opacity=60); 
    -moz-opacity:0.6; 
    -khtml-opacity: 0.6; 
    opacity: 0.6; 
    line-height: 90% 
}

JQuery的：

<script type="text/javascript"> 

    $(function() { 
     $('.wrap').hover(function() { 
      $(this).children('.comment').stop().css("top", "0px"); 
     } 
      , function() { 
       $(this).children('.comment').stop().animate({ "top": '400px' }, 600); 
      }); 
    }); 

</script>

HTML：

<div id="container"> 
       <div class="wrap"> 
        <SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ResizeToFit="100" RenderWrapTable="False" 
         ShowPlaceholder="true" ID="PictureUrlImage" runat="server" class="back" /> 
        <span class="comment"><a href="http://www.google.com" id="A1" >Edit Picture </a> 
        </span> 
       </div> 
      </div>

現在圖片是顯示這樣的。

enter image description here

但我想表明Facebook等圖像

enter image description here

大師請諮詢我

的jsfiddle：jsfiddle.net/ItsMeSri/7mfj7/1

來源

2011-12-02 James123

如果您共享鏈接的網頁或設置一個的jsfiddle，我們可以幫助你更容易。 – Jasper

什麼是'SPSWC：ProfilePropertyImage'？ –

我創建了jsfiddle。 http://jsfiddle.net/ItsMeSri/7mfj7/1/ – James123

-1

CSS3可以做到這一點。它可以做懸停效果反正

更新

如果使用這種上.wrap您然後確保你做出position:relative，因爲這樣可以:after正確擺正自己的位置。

嘗試

.element:hover:after{ 
    content: "<a class='edit_picture' href='' title=''>Edit Picture</a>"; 
    position:absolute; 
    width:80px; 
    margin-right:-80px; 
    left:100%; 
    top:0%; 
}

你確實需要一些JS雖然

$(function() { 
    $('.edit_picture').click(function() { 
     //do magic... 
    }); 
});

來源

2011-12-02 18:30:08

我不知道什麼是生成的HTML。因爲您似乎正在使用在服務器端進行評估的標籤，例如SPSWC:ProfilePropertyImage。你甚至不需要Javascript去做這樣的事情。簡單的CSS可以工作。你檢查Fiddle#d42SU/1/這是你想要的完全相同的東西。假設這是HTML。

<div id="container"> 
    <div class="wrap"> 
     <img src ="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> 
     <span class="comment"> 
      <a href="http://www.google.com" id="A1" >Edit Picture </a> 
     </span> 
    </div> 
</div>

與CSS

#container{ 
    width: 256px; 
} 
#container .wrap{ 
    width: 256px; 
    height: 256px; 
    overflow: hidden; 
    position: relative; 
} 
#container .wrap img{ 
    position: relative; 
} 
#container .wrap span.comment{ 
    background-color: yellow; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    background-color: #000000; 
    padding: 2px; 
    display: none; 
} 
#container .wrap:hover span.comment{ 
    display: block; 
} 
#container .wrap:hover span.comment a{ 
    text-decoration: none; 
    color: #ffffff; 
}

來源

2011-12-02 18:39:12

使用JQuery和CSS在圖片上疊加文本？

回答

相關問題