CSS 图像透明/不透明opacity

深碍√TFBOYSˉ_ 2021-09-15 06:34 422阅读 0赞

创建透明对象，设置悬停效果

img

\{  
opacity:0.4;  
filter:alpha(opacity=40); /\* 适用 IE8 及其更早版本 \*/  
\}  
img:hover  
\{  
opacity:1.0;  
filter:alpha(opacity=100); /\* 适用 IE8 及其更早版本 \*/  
\}  
</style>  
</head>  
<body>  
  
  
<h1>图片透明度</h1>  
  
  
<img src="klematis.jpg" width="150" height="113" alt="klematis">

<img src="/images/klematis2.jpg" width="150" height="113" alt="klematis">

![SouthEast][]

创建一个具有文本拥有背景图像的透明框

div.background

\{  
  width: 500px;  
  height: 330px;  
  background: url(klematis.jpg) repeat;  
  border: 2px solid black;  
\}  
div.transbox  
\{  
  width: 400px;  
  height: 240px;  
  margin: 30px 50px;  
  background-color: \#ffffff;  
  border: 1px solid black;  
  opacity:0.6;  
  filter:alpha(opacity=60); /\* For IE8 and earlier \*/  
\}  
div.transbox p  
\{  
  margin: 30px 40px;  
  font-weight: bold;  
  color: \#000000;  
\}  
</style>  
</head>  
<body><div class="background">  
<div class="transbox">  
<p>This is some text that is placed in the transparent box.  
This is some text that is placed in the transparent box.  
This is some text that is placed in the transparent box.  
This is some text that is placed in the transparent box.  
This is some text that is placed in the transparent box.  
</p>

![SouthEast 1][]

[SouthEast]: /images/20210813/f3ce9fe556b0488494fdb3fe4bdd927a.png
[SouthEast 1]: /images/20210813/eaadc4a3e2304ba0b6eada28af179964.png

发表评论取消回复

表情：

评论列表（有 0 条评论，422人围观）

还没有评论，来说两句吧...

相关阅读

相关 css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术

阅读目录 CSS 图片廊公共的HTML布局 CSS 创建图片廊响应式图片廊 CSS 图像透明/不透明

悠悠/ 2023年10月06日 22:33/ 0 赞/ 52 阅读

相关 css设置背景透明文字不透明，以及字体透明背景不透明的写法

实际展示效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

野性酷女/ 2023年07月13日 13:44/ 0 赞/ 19 阅读

相关 html和css实现透明div上的div不透明，也可说父div透明，子div不透明

css:实现透明div上的div不透明，也可说父div透明，子div不透明，但这里并不是严格的父子关系，只是看起来像是父子关系。一、方法一：（1）代码片段：

短命女/ 2022年07月21日 00:22/ 0 赞/ 240 阅读

相关利用css实现背景半透明，文字不透明。

利用css3新增的rgba属性，在新增filter属性兼容ie6、7、8浏览器 .div{ color:white; background-color:rgba(0,

港控/mmm°/ 2022年06月16日 06:24/ 0 赞/ 289 阅读

相关 CSS实现背景透明，文字不透明(兼容各种浏览器)

IE6是大家都十分头痛的一个浏览器，为了兼容它，一个很小的项目就可以浪费你很多的时间和精力，最简单的有margin、padding，最难的那就不知道了，今天在这里做了一个滤镜的

布满荆棘的人生/ 2022年06月13日 09:07/ 0 赞/ 248 阅读

相关 CSS背景透明文字不透明或者子节点不透明

原文链接：[http://www.jufanshare.com/content/65.html][http_www.jufanshare.com_content_65.html

水深无声/ 2022年05月13日 13:38/ 0 赞/ 260 阅读

相关 CSS实现背景图片透明和文字不透明效果

项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果：背景图 + 伪类 + flite:blu

港控/mmm°/ 2022年04月15日 02:45/ 0 赞/ 378 阅读

相关【CSS】图像透明/不透明

实例1 - 创建一个透明图像 CSS3中属性的透明度是 opacity。首先，我们将向您展示如何用CSS创建一个透明图像。正常的图像 ![在这里插入图片描

骑猪看日落/ 2022年03月21日 14:46/ 0 赞/ 298 阅读

相关 css背景透明

css设置div背景透明有两种方法：第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是background-color:rgba(0,0,

Dear 丶/ 2021年12月24日 07:05/ 0 赞/ 405 阅读

相关 CSS 图像透明/不透明opacity

创建透明对象，设置悬停效果 img \{ opacity:0.4; filter:alpha(opacity=40); /\ 适用 IE8 及其更早版本

深碍√TFBOYSˉ_/ 2021年09月15日 06:34/ 0 赞/ 422 阅读