CSS opacity-实现图片半透明效果

最新推荐文章于 2022-03-07 16:08:42 发布
最新推荐文章于 2022-03-07 16:08:42 发布
阅读量614 收藏
点赞数
分类专栏： css 文章标签： css mozilla filter 浏览器 ie

CSS opacity-实现图片半透明效果

2008-12-7  来源：动态网站制作指南

<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" οnmοuseοver="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" οnmοuseοut="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">
在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。针对IE的设定：this.filters.alpha.opacity=50　而针对Mozilla的设定：this.style.MozOpacity

 

mike_24
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS opacity - 实现图片半透明效果的代码
10-30
CSS opacity - 实现图片半透明效果的代码
HTML5学习笔记（四）
sinat_37138973的博客
11-25 1186
在CSS3中，增加了大量定义颜色方面样式的属性，主要包括以下3种。▶ opacity透明度▶ RGBA颜色▶ CSS3渐变。
C# 透明窗体制作方法比较
Waitforsniping的专栏
01-14 1318
原文地址：http://www.cnblogs.com/jxsoft/archive/2011/03/09/1978153.html （1） 制作透明窗体办法有好几种，各有优缺点. 我们先来看看C#本身提供的办法 1：通过设置窗体的 TransparencyKey实现  　　  例：窗体中的白色会变成透明 this.BackColor =Color.White; this.
html在图片上半透明磨砂,有没有办法在HTML内容上实现磨砂玻璃浮动div（类IO7）...
weixin_35523259的博客
06-04 200
我接过了@elliopizzaman给出的链接，并在一定程度上增强了提琴。通过添加一个使图像更明亮的div层，我可以达到霜状玻璃的外观。边缘不是你可能希望的，但效果是好的。HTML：CSS：#frost {position: absolute;left: 10px;top: 10px;width: 600px;height: 600px;background: rgba(255,255,255,....
H5C3相关知识点小结（二）（自用）
weixin_45038124的博客
03-07 290
H5C3相关知识点小结
C# WinForm 实现窗体渐显效果
学过印刷包装工程研究过食品科学且会点计算机编程的多功能码农
11-06 1887
看到过Windows 7/8等等，其中很多窗口实现了渐显渐隐的效果，很炫。其实在C# 中很容易实现，通过窗体的Opacity属性就可以进行修改。这个属性代表的是窗体的不透明度级别。在通过添加timer 控件来实现这个渐显的过程。 具体代码如下，直接复制和粘贴就可以了，是不是很简单方便。 ///         /// 实现窗体渐显的效果,采用Opacity来实现         ///
纯css实现背景图片半透明内容不透明的方法
12-13
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。 还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 正确姿势 我想到两个方法，第一个...
CSS3制作文字半透明倒影效果的两种实现方式
12-13
效果如图。Ps、背景线条是背景图勒，和本文效果无关。。。 html代码如下： 复制代码代码如下: ”content”> ”专业技能”>专业技能</h3> ”next”><!–其他内容–></div> </div> 有两种实现方式： 1.box-...
css 背景半透明最佳实践
01-19
现在有一个需求，需要对一个纯色的层实现半透明效果。效果如下，边框需要透明，透明度为 #000000 的 30%： 用各种浏览器打开下面这个 DEMO, IE9 有特殊显示：http://demo.jb51.net/js/2011/transparentbg/ 一、使用...
使用jQuery实现图片遮罩半透明坠落遮挡
01-21
默认九宫格图片排列效果，当鼠标悬停在图片上后，会从图片的上方下滑一个半透明遮罩的效果 同时出现一些文字介绍 使用方法： 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方...
CSS实现背景图片透明而文字不透明效果的两种方法
12-13
摘要: 方法一(毛玻璃效果)：背景图 + 伪类 + flite:blur(3px) 方法二(半透明效果)：背景图 + 定位 + background:rgba(255,255,255,0.3) CSS实现背景图片透明，文字不透明效果的两种方法 项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果： 背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-alig
div设置背景图片透明度且字不透明
09-26
div设置背景图片透明度且字不透明,div设置背景图片透明度且字不透明
图片变透明之opacity属性
weixin_44543252的博客
01-18 1734
CSS3图像透明度 开发工具与关键技术：DW-opacity属性 作者：徐晶旗 撰写时间：2019年1月18日 利用opacity属性来改变图片的透明度，opacity 属性能够设置的值从 0.0 到 1.0。值越小，图片越透明。 下面这几张图片是执行代码得出的效果，第一张图片没有给它设置opacity值，所以它呈现的是原图，没有透明的效果，后面几张图设置的opacity值越来越小，可...
opacity对图片的用法
团酱
01-23 514
opacity对图片的用法，想让图片有一种灰色的感觉就可以使用opacity <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
css实现图片半透明效果
weixin_30488313的博客
08-09 365
代码：这个效果在IE和Mozilla浏览器上都可以工作，代码如下 <img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseove...
CSS opacity - 实现图片半透明效果(转)
JofeeDong's Blog
02-16 1490
 前几天一位做网页设计的朋友问我这个问题：如何通过CSS来实现图片半透明效果，并且在IE和Mozilla上都可以得到支持。下面将我的方法分享给大家。下图为通过CSS实现的图片透明效果这个效果在IE和Mozilla浏览器上都可以工作，代码如下this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.
html通过css来设置半透明背景
热门推荐
jumtre的专栏
03-02 12万+
Html/Css标签透明度效果的实现,在html中，实现半透明背景，在HTML Div+Css编程中，为了实现版透明，通常有3中做法。 第一种是HTML5的透明，在H5中支持透明背景颜色，但遗憾的是，H5中的办透明背景颜色只支持 rgba的写法，不支持16进制的写法 如： background-color:rgba(0,152,50,0.7);// -->70%的不透明度
CSS opacity - 实现图片半透明效果
SiC B2B2C Shop大型B2B2C商城软件产品，使用Java语言开发，高性能高扩展性高安全性分布式。可帮助你快速的建立大型B2B2C电商系统
10-09 564
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE
css鼠标悬停实现文字半透明显示在图片上方法
最新发布
07-26
要实现鼠标悬停时文字半透明显示在图片上，可以使用CSS的伪元素和过渡效果。 首先，我们需要在HTML中将图片和文字包含在一个容器中，例如一个div元素。然后，为该容器添加一个class名称，例如“hover-container”。 接下来，在CSS样式表中，我们为这个class名称添加样式。 ```css .hover-container { position: relative; } .hover-container:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); /* 设置半透明的背景颜色 */ opacity: 0; /* 初始时透明度为0 */ transition: opacity 0.5s; /* 添加过渡效果，使透明度变化平滑 */ } .hover-container:hover:before { opacity: 1; /* 鼠标悬停时透明度为1，显示半透明背景 */ } ``` 在上面的代码中，我们使用“::before”伪元素在容器的内容之上创建了一个半透明的背景层。通过设置background-color属性为rgba(0, 0, 0, 0.5)，我们可以将背景颜色设置为黑色并且透明度为0.5。然后，通过将opacity属性设置为0，让半透明背景一开始是隐藏的。使用transition属性，我们为透明度添加了一个过渡效果，持续时间为0.5秒。当鼠标悬停在容器上时，通过将透明度设置为1，我们让半透明背景显示出来。 这样，当鼠标悬停在容器上时，文字将半透明显示在图片上。你可以根据需要调整背景颜色、透明度和过渡效果的属性值来实现自己想要的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值