善恶资源网专注优秀技术教程分享网-傅汉松!

CSS如何设置背景颜色透明度

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是CSS如何设置背景颜色透明度

傅汉松

建网站时,我们通过background属性设置背景颜色,默认情况下背景颜色的透明度为0。我们可以通过CSS代码来控制背景的透明度。

控制背景透明度的属性是:

filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;

设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度

举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
  padding: 25px;
  background-color:#000000;
  filter:alpha(opacity:50); opacity:0.5;  -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
    color: #FFFFFF;
}
</style>
</head>
<body>    
 
<div class="demo">
    <p>背景透明,文字也透明</p>
</div>
</body>

除了以下的方式之外,还可以通过rgba方式设置背景颜色透明。

所谓RGBA颜色,就是RGB三原色加ALPHA。在给背景添加颜色的同时,提供透明度特性。

用法:

background:rgba(R,G, B, A);

下面我们就来看通过rgba方式设置背景颜色透明度的具体实例:

<div class="title_div">背景颜色透明</div>
.title_div{
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin:0 auto;
background-color:rgba(220,38,38,0.2);
}

这样也可以设置一个DIV的透明度。


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 CSS如何设置背景颜色透明度
建网站时,我们通过background属性设置背景颜色,默认情况下背景颜色的透明度为0。我们可以通过CSS代码来控制背景的透明度。控制背景透明度的属性是:fil...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    114.35ms