透明度和背景透明opacity&transparent - 走看看

zoukankan html css js c++ java

透明度和背景透明opacity&transparent

1、透明度
opacity: 0.3;
filter:alpha(opacity=30);
opacity设置透明度，后代元素会继承当前元素的透明度。
效果如下图：

<!DOCTYPE html> <html> <head> <title>透明度---opacity---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { 500px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; opacity: 0.3; filter:alpha(opacity=30); background: red; } </style> </head> <body> <div class="test"> 测试。。。 </div> </body> </html>

2、背景透明
  background-color: rgba(255,0,0,0.3);
前三个参数代表rgb数值，最后一个参数代表透明度
background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#50ff0000,endColorstr=#50ff0000);
  zoom: 1;
50ff0000：前两位代表透明度，后面六位分表代表rgb的数值。
效果如下图：

<!DOCTYPE html> <html> <head> <title>背景明度---transparent---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { 500px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; background: transparent; background-color: rgba(255,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#50ff0000,endColorstr=#50ff0000); zoom: 1; } </style> </head> <body> <div class="test"> 测试。。。 </div> </body> </html>

查看全文

相关阅读:
svn使用方法
 董事、执行董事、总裁、总经理
 华联、联华、世纪华联、百联
 声明式编程和命令式编程
 NodeJS中的require和import
JSONP跨站访问
 Camera服务之--架构浅析
 HashMap实现原理分析
 设计模式解读之一：策略模式
 Java6.0中Comparable接口与Comparator接口详解

原文地址：https://www.cnblogs.com/kuikui/p/2334840.html

Copyright © 2011-2022 走看看