PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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

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



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 สำหรับอ้างอิง