CSS3可以讓我們對圖片進行一些特效處理,例如讓圖片漸變透明。這個效果可以通過使用CSS3中的opacity屬性來實現。opacity屬性可以設置元素的透明度,取值范圍從0(完全透明)到1(完全不透明)。
img { opacity: 0.7; /* 設置透明度為0.7,即30%不透明 */ -moz-opacity: 0.7; /* Firefox 早期版本 */ -webkit-opacity: 0.7; /* Safari和chrome早期版本 */ }
以上代碼將圖片的透明度設置為0.7,即30%不透明。如果想要實現漸變透明的效果,需要通過CSS3中的transition屬性來實現。transition屬性可以讓元素在一段時間內逐漸地從一種樣式變換到另一種樣式。
img { opacity: 1; /* 初始時圖片不透明 */ -moz-opacity: 1; /* Firefox 早期版本 */ -webkit-opacity: 1; /* Safari和chrome早期版本 */ transition: opacity 1s; /* 過渡時長為1秒 */ -moz-transition: opacity 1s; /* Firefox 早期版本 */ -webkit-transition: opacity 1s; /* Safari和chrome早期版本 */ } img:hover { opacity: 0.5; /* 鼠標懸停時圖片透明度變為0.5 */ -moz-opacity: 0.5; /* Firefox 早期版本 */ -webkit-opacity: 0.5; /* Safari和chrome早期版本 */ }
以上代碼將圖片的透明度設置為1,當鼠標懸停在圖片上時,圖片的透明度會逐漸變為0.5,過渡時長為1秒。這樣就可以實現圖片漸變透明的效果了。
上一篇css3 跳轉動畫
下一篇mysql查詢某一類數據