CSS 图像透明/不透明

时间 2019-11-07

标签 css 图像透明不透明栏目 CSS 繁體版

原文原文链接

使用CSS很容易建立透明的图像。php

注意：CSS Opacity属性是W3C的CSS3建议的一部分。css

实例1 - 建立一个透明图像

CSS3中属性的透明度是 opacity.url

首先，咱们将向您展现如何用CSS建立一个透明图像。spa

正常的图像指针

相同的图像带有透明度：code

看看下面的CSS：orm

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

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

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

实例2 - 图像的透明度 - 悬停效果

将鼠标移到图像上：

CSS样式：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

第一个CSS块是和例1中的代码相似。此外，咱们还增长了当用户将鼠标悬停在其中一个图像上时发生什么。在这种状况下，当用户将鼠标悬停在图像上时，咱们但愿图片是清晰的。

此CSS是：opacity=1.

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

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

实例3 - 透明的盒子中的文字

源代码以下：

<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  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>
</div>
</div>

</body>
</html>

首先，咱们建立一个固定的高度和宽度的div元素，带有一个背景图片和边框。而后咱们在第一个div内部建立一个较小的div元素。这个div也有一个固定的宽度，背景颜色，边框 - 并且它是透明的。透明的div里面，咱们在P元素内部添加一些文本。

原文地址：http://www.phplearn.cn/css/css-image-transparency.html

CSS 图像透明/不透明

更多实例

实例1 - 建立一个透明图像

实例2 - 图像的透明度 - 悬停效果

实例3 - 透明的盒子中的文字