在網頁設計中,使用圖片可以大大豐富頁面的視覺效果。而CSS是用來控制網頁外觀的語言,也可以用來進行圖片的設置與應用。以下是一些在CSS中應用圖片的常用技巧。
/*設置背景圖片*/ body{ background-image:url("bg.jpg"); } /*設置元素的背景圖片*/ div{ background-image:url("box.jpg"); } /*調整背景圖片的位置*/ div{ background-image:url("box.jpg"); background-position:center top; } /*設置重復平鋪的背景圖片*/ div{ background-image:url("box.jpg"); background-repeat:repeat; } /*設置水平平鋪的背景圖片*/ div{ background-image:url("box.jpg"); background-repeat:repeat-x; } /*設置垂直平鋪的背景圖片*/ div{ background-image:url("box.jpg"); background-repeat:repeat-y; } /*設置不重復的背景圖片*/ div{ background-image:url("box.jpg"); background-repeat:no-repeat; } /*調整背景圖片的大小*/ div{ background-image:url("box.jpg"); background-size:cover; } /*設置元素的圖片*/ img{ src:"pic.jpg"; }
除了以上技巧,還可以使用CSS3的transform屬性對圖片進行各種變換,例如旋轉、縮放、傾斜等等。
總之,使用圖片可以使網頁更加生動有趣,而CSS的應用可以對圖片進行各種處理,讓圖片達到更好的效果。
上一篇el-menu css
下一篇css文件加隨機緩存