推荐阅读
  • CSS 简介

    CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在 首页 访问相关教程。 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式

  • CSS 网页布局

    CSS 网页布局 网页布局 网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 头部区域 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo: CSS3 实例 [mycode3 type='css'] .header { background-color: #F1F1F1; text-align

  • 视频(Video)

    响应式 Web 设计 - 视频(Video) 使用 width 属性 如果 width 属性设置为 100%,视频播放器会根据屏幕大小自动调整比例: 实例 video {     width: 100%;    height: auto; } 尝试一下 » 注意在以上实例中,视

  • CSS Web安全字体

    CSS Web安全字体组合 常用的字体组合 font-family属性是多种字体的名称,作为一个“应变”制度,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体,它尝试下一个的字体。 你想要的字体类型如果浏览器找不到,它会从通用的字体类型中找到与你相似的: 实例 p{font-family:'Times New Roman', Times, ser

  • CSS 链接(link)

    CSS 链接 不同的链接可以有不同的样式。 链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。 特别的链接,可以有不同的样式,这取决于他们是什么状态。 这四个链接状态是: a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 实例 [my

  • CSS 尺寸 (Dimension)

    CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。 更多实例 设置元素的高度 这个例子演示了如何设置不同元素的高度。 使用百分比设置图像的高度 这个例子演示了如何使用百分比值设置元素的高度。 使用像素值来设置元素的宽度 本例演示如何使用像素值来设置元素的宽度。 设置元素的最大高度 此示例演示如何设置元素的

  • CSS 动画

    CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。 浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。 紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

  • CSS Id 和 Class选择器

    CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置'id' 和 'class'选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 '#' 来定义。 以下

  • CSS Display(显示)

    [mystyle] .imgbox { float:left; text-align:center; width:120px; height:135px; border:1px solid gray; margin:4px; padding:0px; } .thumbnail { width:110px; height:90px; margin:3px; } .box { width:110px

  • CSS 对齐

    CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的 实例 [mycode3 type='cs

CSS 图像透明/不透明

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

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

Examples

更多实例

创建透明图像 - 悬停效果

创建一个具有文本的拥有背景图像的透明框

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

CSS3中属性的透明度是 opacity

首先,我们将向您展示如何用CSS创建一个透明图像。

正常的图像

klematis

相同的图像带有透明度:

klematis

看看下面的CSS:


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。较低的值,使得元素更加透明。

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

将鼠标移到图像上:

klematisklematis

CSS样式:


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).

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

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

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

源代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>div.background
{
  width:500px;
  height:250px;
  background:url(https://www.lvstudy.com /images/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); /* IE8 及更早版本 */
}
div.transbox p
{
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
}</style>
</head>
 
<body>
 
<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
 
</body>
</html>

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

关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图