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