CSS 图像透明/不透明

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

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

一、示例一：创建一个透明图像

CSS3中属性的透明度是 opacity。

首先，我们将向您展示如何用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。较低的值，使得元素更加透明。

二、示例二：图像的透明度 - 悬停效果

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">

<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); /* 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元素内部添加一些文本。

效果：

CSS 图像透明/不透明的更多相关文章

  1. CSS：CSS 图像透明/不透明

    ylbtech-CSS:CSS 图像透明/不透明 1.返回顶部 1. CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 更多 ...

  2. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

  3. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  4. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  5. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  6. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  7. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  8. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

  9. C#设置欢迎窗体由不透明变透明

    public Form1()        {            InitializeComponent();        } private bool isForm1 = true;  //设 ...

随机推荐

  1. TCP连接的建立与终止过程详解

    TCP连接的建立与终止: 1.TCP连接的建立      设主机B运行一个服务器进程,它先发出一个被动打开命令,告诉它的TCP要准备接收客户进程的连续请求,然后服务进程就处于听的状态.不断检测是否有客 ...

  2. [SharePoint 2010] 如何安裝啟用多國語系支援的SharePoint網站

    SharePoint 2010的多國語系支援與前一版的SharePoint 2007有所不同,SharePoint 2010內允許使用者自行決定使用介面語系的選擇. SharePoint 2010的多 ...

  3. Spring--简记

    Spring通过一个配置文件描述Bean及Bean之间的依赖关系,利用Java语言的反射功能实例化Bean并建立Bean之间的依赖关系. Spring的IoC(控制反转)容器提供了Bean实例缓存.生 ...

  4. jQuery Mobile 总结

    转载  孟祥月 博客 http://blog.cshttp://blog.csdn.net/mengxiangyue/article/category/1313478/2dn.http://blog. ...

  5. oracle导入导出 dmp文件

    oracle导入导出 dmp文件: 打开cmd窗口,在cmd窗口下,按照个人需要输入以下对应的命令: 1.imp 用户名/密码@网络服务名 file=XXX.dmp fromuser=XXX tous ...

  6. 用于金融分析的Python包

    1. NumPy:实现各种数组对象函数和傅立叶变换等等科学计算模块.2. SciPy:提供更多科学计算功能,包括矩阵,求解线性方程组,积分运算,优化等.3. matplotlib:一个跨平台的数值绘图 ...

  7. echarts将折线图改为曲线图

    只要在 series中加上属性: smooth: true(true为曲线.flase为直线)

  8. Spring Data 之 Repository 接口

    1. 介绍 Repository是一个空接口,即是一个标记性接口; 若我们定义的接口继承了Repository,则该接口会被IOC容器识别为一个 Repository Bean; 也可以通过@Repo ...

  9. 荣誉墙项目day28 django常用函数

    1.在网页上渲染字符串from django.http import HttpResponsereturn HttpResponse(u"hello world") 2.渲染网页f ...

  10. 通过EditText的setTransformationMethod()隐藏或显示密码

    private Button mBtnPassword; private EditText mEtPassword; private boolean mbDisplayFlg = false; /** ...