纯css行内实现点击实现图片的淡入淡出

html-css022

纯css行内实现点击实现图片的淡入淡出,第1张

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>图片的淡入淡出</title>

</head>

<body style="background-color: #eee">

<img style="opacity: 0 -webkit-transition: opacity 1s ease -moz-transition: opacity 1s ease -ms-transition: opacity 1s ease -o-transition: opacity 1s ease transition: opacity 1s ease" 

onclick="this.style.opacity == '1' ? this.style.opacity = '0' : this.style.opacity = '1'" 

src="https://www.baidu.com/img/bd_logo1.png">

<p>点击上面区域试试</p>

</body>

</html>

设置图片的透明度即可

img{

    opacity:0.5

    filter:alpha(opacity=50) /* 针对 IE8 以及更早的版本 */

}