CSS內部圖片大全,指的就是在CSS中添加背景圖片或者使用CSS Sprites技術時所用到的所有圖片等。下面我們將為大家介紹一些常用的CSS內部圖片。
/* 1. 使用CSS添加背景圖片 */ div { background-image: url("images/bg.jpg"); } /* 2. 使用CSS添加帶有翻轉效果的背景圖片 */ div:hover { background-image: url("images/bg-flip.jpg"); transform: scaleX(-1); } /* 3. 使用CSS Sprites技術 */ .sprite { background-image: url("images/sprites.png"); background-repeat: no-repeat; } /* 在sprite圖片中,分別是x=0,y=0和x=0,y=-20的兩個圖標 */ .icon1 { width: 20px; height: 20px; background-position: 0 0; } .icon2 { width: 20px; height: 20px; background-position: 0 -20px; }
以上就是一些常見的CSS內部圖片的使用方法,可以幫助大家更好地美化網頁。
上一篇css內部div全屏