วิธีทำภาพซ้อนภาพ CSS สำเร็จรูป


ตัวอย่างดูรูปด้านข้าง
คัดลอกโค้ดด้านล่างไปใช้ได้เลย
<style type="text/css">
#sky {width: 300px; height: 100%; top: 0px; right: 0px; padding: 5px; background-image:url("URL รูป");position: fixed;filter:alpha(opacity=40);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;border-left:4px solid #ccc;}
#sky:hover {filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;}
li{ margin-left:20px;}
#back {width: 300px; height: 100%; top: 0px; right: 0px; padding: 5px; background-image:url('URLรูป'); background-position:center center; text-align: center;position:fixed;background-color:#000;background-repeat:no-repeat;border-left:3px solid #000;}
 </style>
<br />
<div id="back">
</div>
<div id="sky">
</div>
</div>



ไม่มีความคิดเห็น:

แสดงความคิดเห็น

กฎและข้อตกลง
x ไม่อนุญาติให้โพสโฆษณา หรือคอมเม้นเชิงโปรโมทเว็บไซส์,สินค้า หรือการบริการต่างๆในบล็อกนี้ หากต้องการลงโฆษณากับทางบล็อก กรุณาติดต่อที่หน้า contact โดยตรง
x ไม่คอมเม้นเสียดสี เหยียดผู้อื่นให้เกิดความเสียหาย
x ไม่คอมเม้นด้วยคำที่ไม่สุภาพ
x หากไม่ปฏิบัติตามจะทำการลบคอมเม้นโดยทันที