CSS制作斜角上有背景圖片的Div層_層和布局特效
CSS控制一個(gè)Div的斜角處出現(xiàn)一個(gè)不規(guī)則的圖片，DIV是不是漂亮多了？實(shí)現(xiàn)方法也不是太復(fù)雜，這里有個(gè)問題先說一下，本代碼段用的是一張JPG格式的圖片，有可能會遮擋文字，你在用的時(shí)候，最好處理一個(gè)JPG為PNG透明格式，這樣顯示在圖片處的文字不會被遮擋，完美了！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>CSS制作斜角上有背景圖片的Div層</title> <style> .window{ width:400px; border:1px solid #B6B6C0; position:relative; } .title{ background:#F0F0F2; height:30px; border-bottom:1px solid #CBCFD2; font-size:14px; line-height:30px; text-indent:1em; } .body{ height:100px; font-size:12px; padding:8px; } .flag{ 1122123<img src=http://p1.mb5u.com/texiao/3/20100522231330317.jpg _fcksavedurl=http://p1.mb5u.com/texiao/3/20100522231330317.jpg>2244234background:url(http://p1.mb5u.com/texiao/3/20100522231330317.jpg) no-repeat 100% 0; height:55px; width:55px; position:absolute; right:0; top:0; } </style> </head> <body> <div class="window"> <div class="flag"></div> <div class="title">模板無憂</div> <div class="body">模板無憂（mb5u.com）提供各類網(wǎng)頁模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。</div> </div> </body> <script> </script> </html>
。