CSS3之图像透明&不透明

Posted 2021-04-09 IT大亨

        CSS3的图像透明和不透明能实现一些小特效，很容易建立透明图像。

        那么，如何用CSS创建一个透明图像呢？

        首先，第一步创建一个透明图像

        CSS3中属性的透明度是 opacity.

 

        正常图像，如下：

       带有透明度属性的图像，如下：

       CSS的代码是这样的（我用的代码并不是用link链接CSS的，为了方便，我只是写在了style里）：

       eg：

        img{

opacity:0.4;

filter:alpha(opacity=40); 

}

        IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

   

        IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

        当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，图片是清晰的，应该是用户更希望看到的。

        那么CSS是：opacity=1.

 

        IE8和更早版本使用： filter:alpha(opacity=100)；

       当鼠标指针远离图像时，图像将重新具有透明度。

        我写了个简单的代码，代码也用到了鼠标放在图上实现动一下的小特效，除了参考资料，基本原创，写的不好的地方请多多指出。

       源代码放在百度云盘里，有需要下载代码的小伙伴也可以去云盘下载。

       链接：https://pan.baidu.com/s/1nvYzAy9 

       密码：u1cm