css-图像透明

2017-04-22

css

字数统计: 1k | 阅读时长≈ 4 分钟

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

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

创建一个透明图像

CSS3中属性的透明度是 opacity。

img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 
Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

图像的透明度 - 悬停效果

CSS样式：

1 2	img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 / } img:hover { opacity:1.0; filter:alpha(opacity=100); / IE8 及其更早版本 */ }

第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。

此CSS是：opacity=1.

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

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

透明的盒子中的文字

这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。

源代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20div.background%20%7B%0A%20%20%20%20%20%20%20%20width%3A%20500px%3B%0A%20%20%20%20%20%20%20%20height%3A%20250px%3B%0A%20%20%20%20%20%20%20%20background%3A%20url(klematis.jpg)%20repeat%3B%0A%20%20%20%20%20%20%20%20border%3A%202px%20solid%20black%3B%0A%20%20%20%20%7D%0A%20%20%20%20div.transbox%20%7B%0A%20%20%20%20%20%20%20%20width%3A%20400px%3B%0A%20%20%20%20%20%20%20%20height%3A%20180px%3B%0A%20%20%20%20%20%20%20%20margin%3A%2030px%2050px%3B%0A%20%20%20%20%20%20%20%20background-color%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%20black%3B%0A%20%20%20%20%20%20%20%20opacity%3A%200.6%3B%0A%20%20%20%20%20%20%20%20filter%3A%20alpha(opacity%3D60)%3B%0A%20%20%20%20%20%20%20%20%2F*%20IE8%20%E5%8F%8A%E6%9B%B4%E6%97%A9%E7%89%88%E6%9C%AC%20*%2F%0A%20%20%20%20%7D%0A%20%20%20%20div.transbox%20p%20%7B%0A%20%20%20%20%20%20%20%20margin%3A%2030px%2040px%3B%0A%20%20%20%20%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23000000%3B%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" /> </head>

<body>
  <div class="background">
    <div class="transbox"> 这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。 </div>
  </div>
</body>

</html>

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

版权声明： 本博客所有文章，未经许可，任何单位及个人不得做营利性使用！转载请标明出处！如有侵权请联系作者。