CSS圖像屬性是用于控制圖像在網(wǎng)頁中的呈現(xiàn)效果的屬性,包括圖像的大小、位置、透明度等。
img { width: 200px; height: 150px; border: 1px solid #ccc; opacity: 0.8; }
其中,width和height分別控制圖像的寬度和高度,可以采用像素、百分比等單位進(jìn)行設(shè)置。border屬性用于給圖像添加邊框,可以設(shè)置邊框的寬度、顏色、樣式等。opacity屬性用于設(shè)置圖像的透明度,取值范圍從0到1,0表示完全透明,1表示不透明。
img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
另外,position屬性也可以用于控制圖像的位置,absolute表示采用絕對(duì)定位,top和left分別表示距離頂部和左側(cè)的距離,可以也可以采用百分比等單位。transform屬性用于控制元素的變形效果,translate函數(shù)可以用于平移元素的位置。
img:hover { filter: grayscale(100%); }
最后,filter屬性可以用于給圖像添加特效。例如,上述代碼中的hover表示在鼠標(biāo)懸停時(shí)圖像變?yōu)榛疑琯rayscale函數(shù)表示將圖像轉(zhuǎn)換為灰度圖。
上一篇css url傳圖片
下一篇css3左箭頭