CSS图片透明度

作者: Jay_ZJ | 来源:发表于2019-06-03 00:19 被阅读0次

css图片的一些方法
Hack、过渡与变形（变换）
CSS图片透明度
css图片加透明度
0608-web：图片/log/异常处理/唯一索引/
CSS样式更改——用户界面和指针类型
JS动画（三）
17.1.25 css透明度和鼠标手势
轮播图分步解析
CSS 实现图片透明度渐变效果

opacity属性

利用opacity属性实现图片透明

img { 
  opacity: 0.4; /* opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明 */
  filter: alpha(opacity=40);  /* 针对IE8以及以前的版本 */
}

hover属性

利用hover属性实现鼠标滑过，改变透明度

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

图片中透明文本

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 400px;
  height: 266px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid black;
}

div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

div.transbox p
{
  margin: 30px 40px;
}
</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>
</div>
</div>

</body>
</html>

首先，我们创建一个 div 元素 (class="background")，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。

CSS 图像透明度.png