PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery

26 March 2009 By
jquery css ข้อความ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery css ข้อความ



CSS Code

<style type="text/css"> 
#overLayText{ 
    position:relative; 
    bottom:0px; 
    font-size:12px; 
    padding:5px; 
} 
</style> 

HTML Code

<div id="hilightDiv"> 
<img src="demo/big_img.jpg" /> 
<div id="overLayText"> 
เรียนรู้การทำอาหารจากมืออาชีพ ได้แล้ว โดยไม่เสียค่าใช้จ่ายใดๆ
</div> 
</div> 

Javascript Code

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    var Tw=$("#hilightDiv img").width(); 
    var Tw2=Tw-$("#overLayText").css("padding"); 
    $("#hilightDiv").width(Tw);     
    var Th=$("#overLayText").height()+10; 
    $("#overLayText").css({ 
        "background-color":"#000000", 
        "color":"#FFFFFF", 
        "top":-Th, 
        opacity:0.75 
    }); 
}); 
</script> 

ตัวอย่าง

เรียนรู้การทำอาหารจากมืออาชีพ ได้แล้ว โดยไม่เสียค่าใช้จ่ายใดๆ






Tags:: ข้อความ css jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง