PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

26 March 2009 By Ninenik Narkdee
ข้อความ 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:: jquery ข้อความ css






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


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