css3 图片透明-如何在CSS中设置图像的透明度和不透明度

2023-08-23 0 5,454 百度已收录

CSS图片透明度和不透明度可以实现网站制作中的一些小特效,轻松制作出透明图片css3 图片透明,让设计出来的网站更加美观。 那么css3 图片透明,如何用CSS创建透明图像呢?

第一步,创建透明图像

css中图片属性的透明度为opacity,例如正常的图片如下:

css3 图片透明-如何在CSS中设置图像的透明度和不透明度

具有透明度属性的图像,如下:

css3 图片透明-如何在CSS中设置图像的透明度和不透明度

用CSS代码实现:

图像{

css3 图片透明-如何在CSS中设置图像的透明度和不透明度

不透明度:0.4;

过滤器:alpha(不透明度=40);

css3 图片透明-如何在CSS中设置图像的透明度和不透明度

IE9、Firefox、Chrome、Opera 和 Safari 浏览器使用透明度属性使图像不透明。 不透明度属性值从 0.0 - 1.0。 较小的值使元素更加透明。

IE8及更早版本使用滤镜:alpha(opacity=x)。 x 可以取 0 - 100 之间的值。较低的值使元素更加透明。

css3 图片透明-如何在CSS中设置图像的透明度和不透明度

当用户将键盘悬停在其中一张图像上时会发生什么。 在这些情况下,当用户将键盘悬停在图像上时,图像是清晰的,这应该是用户希望看到的。

那么CSS就是:opacity=1。

IE8及更早版本使用:filter:alpha(opacity=100); 当鼠标指针移离图像时,图像将恢复透明度。

分享名称:CSS中如何设置图片的透明度和不透明度

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 css3 css3 图片透明-如何在CSS中设置图像的透明度和不透明度 https://www.wkzy.net/game/147128.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务