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. 编写jsp动态网页

    默认情况下,jsp网页必须保存在TOMCAT_HOME/webapps 目录下才能被客户请求. JSP网页的主题仍然是html标签,在需要显示动态数据的地方添加<%%>标记,在其中编写合法 ...

  2. python里的生成器

    author:headsen chen date:2018-03-22 10:59:46 notice:This article created by headsen chen himself and ...

  3. ORACLE WITH AS 用法,创建临时表

    语法: with tempName as (select ....) select ... –针对一个别名with tmp as (select * from tb_name) –针对多个别名with ...

  4. iOS 常用框架介绍

    iOS框架介绍      Cocoa Touch   GameKit  实现对游戏中心的支持,让用户能够在线共享他们的游戏相关的信息  iOS设备之间蓝牙数据传输   从iOS7开始过期   局域网游 ...

  5. JS之for...in和for...of

    for...in输入键: for...in循环有几个缺点. 数组的键名是数字,但是for...in循环是以字符串作为键名“0”.“1”.“2”等等. for...in循环不仅遍历数字键名,还会遍历手动 ...

  6. Spark官方3 ---------Spark Streaming编程指南（1.5.0）

    Design Patterns for using foreachRDD dstream.foreachRDD是一个强大的原语,允许将数据发送到外部系统.然而,了解如何正确有效地使用该原语很重要.避免 ...

  7. 使用python的logging模块（转）

    一.从一个使用场景开始 开发一个日志系统, 既要把日志输出到控制台, 还要写入日志文件 import logging # 创建一个logger logger = logging.getLogger(' ...

  8. Ubuntu 12.04安装Google Chrome（转）

    下载google chrome deb包,下载地址:https://www.google.com/chrome/browser/desktop/index.html,google的网站被墙了,如果你下 ...

  9. Linux ssh服务

    关于ssh服务不多说就提几句,1,机房的服务器一般都是通过远程连接登录的,远程登录就必然少不了ssh客户端.2,虚拟机每次都要点击进去,每次退出来也需要按Ctrl+Alt+Enter,也比较麻烦,有时 ...

  10. 前台js加密实例

    1.base64加密 一个字节一般由8位表示,base64加密就是把8位表示转为6为表示,余下2位添0表示,故有个特点不能充分利用空间. 资源下载:jquery.js,base64.js // `ut ...