学做网站培训课程介绍

当前位置:

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

建网站时,我们通过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的透明度。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 什么是DIV+CSS 附件下载 (1155075 次浏览)
    本节建站课程高清视频下载链接: https://pan.baidu.com/s/1sl6nR8D 密码: urwgdiv+css就是把设计师设计好的图片,转变成一张静态页面的技术。html
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 我们在做网站时,如果自己网站上的图片被别人复制过去,就会增加自己网站服务器的负担,所以在做网站时,需要做一些防盗链设置。如果你的空间支持.hta
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • 默默无闻的网页我们看了成千上万,怎么让自己做网页能发声呢,来试试给网页添加一些背景音乐吧。(相关教程:如何在网页里添加背景音乐)网页中添加
  • DZ论坛程序上传之后,默认的是蓝底白字,不是很美观。怎么去更换自己需要的背景颜色和背景图片呢,有二种更换的方法,第一种是通过FTP软件找到相应的C
  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设
  • css设置半透明背景 图文教程 (140470 次浏览)
    在网页设计和网站制作过程中,为了达到某个效果需要网站布局的某个DIV是透明的或者是半透明的。如下图:怎么在自己做网站时运用这个CSS样式达
  • 修改网站图片会使用到PS软件,如果我们想制作一张透明背景图片,请问一般使用什么格式的图片?
  • 建网站时,我们通过background属性设置背景颜色,默认情况下背景颜色的透明度为0。我们可以通过CSS代码来控制背景的透明度。控制背景透明度的属性