css-图像透明

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

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

创建一个透明图像

CSS3中属性的透明度是 opacity

1
2
3
4
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).

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


透明的盒子中的文字

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

源代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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元素内部添加一些文本。

  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~