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. Node.js 搭建Web

    Express Express 是整个 Node.js 之中最为常见的一个框架(开发包),可以帮助我们快速构建一个WEB项目.(http://expressjs.com) 1.在 F 盘新建 node ...

  2. C#中命名空间别名的使用

    C#中使用命名空间来分割不同的层级,在不同的层级中可以使用相同的类声明和变量声明.在程序中使用不同命名空间的下的相同名称的类时:可以用一下这几种方法进行限定: 1.使用完全限定名 using Syst ...

  3. Systemd mysql，nginx，php启动配置文件

    systemctl的配置文件目录一般在 /usr/lib/systemd/system/ 或者/etc/systemd/system/ 需要注意的是,nginx与php运行用户必须是root,所以不需 ...

  4. 【转】UML中类与类之间的5种关系表示

    一.继承关系      继承指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力.在Java中继承关系通过关键字extends明确标识,在设计时一 ...

  5. Linux上的下载软件uGet

    uGet是一款开源下载软件,类似于我们常用的迅雷,不过uGet支持的操作系统非常多,Ubunut,Arch,openSUSE,Windows,MacOS,BSD等. uGet支持两个下载引擎:curl ...

  6. WCF服务对于处理客户端连接的一点思考

    对于每个客户端的,服务端是否为每个客户端有专门的“通道”? 目的:想在服务端记录下来客户端的访问记录(进入.各个操作.离开等信息),并将其执行的操作独立记录在各个客户端对应的日志中. 下面是代码: 契 ...

  7. 使用paramiko执行远程linux主机命令

    paramiko是python的SSH库,可用来连接远程linux主机,然后执行linux命令或者通过SFTP传输文件. 关于使用paramiko执行远程主机命令可以找到很多参考资料了,本文在此基础上 ...

  8. html5 live stream

    一.传统的安防监控/流媒体音视频直播基本架构 A/V device 信号采集(yuv/rgb) ---> 转码(h264/265) ---> 网络推送(rtsp/rtmp/http/onv ...

  9. 转 Merkle Tree（默克尔树）算法解析

    Merkle Tree概念  Merkle Tree,通常也被称作Hash Tree,顾名思义,就是存储hash值的一棵树.Merkle树的叶子是数据块(例如,文件或者文件的集合)的hash值.非叶节 ...

  10. LDA算法里面Dirichlet分布的两个参数alpha和beta怎样确定？

    本文参考自:https://www.zhihu.com/question/21692336/answer/19387415   方法一: alpha 是 选择为 50/ k, 其中k是你选择的topi ...