4.CSS实现背景半透明效果

写在前面的话:

  ~

原文链接:CSS实现背景半透明效果

HTML

<div class="alpha1">
  <div class="ap2">
    <p>背景为红色(#FF0000),透明度20%。</p>
  </div>
</div>

CSS

.alpha1{
  width:300px;
  height:200px;
  background-color:#FF0000;
  filter: Alpha(Opacity=30);
}
.ap2{
  position:relative;
}

以上 CSS 仅IE支持

兼容FF、OP怎么写呢?如下:

HTML

<div class="alpha1">
  <div class="ap2">
    <p>背景为红色(#FF0000),透明度20%。</p>
  </div>
<!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>

CSS

.alpha1,.alpha2{
  width:100%;
  height:auto;
  min-height:250px;/* 必需 */
  _height:250px;/* 必需 */
  overflow:hidden;
  background-color:#FF0000;/* 背景色 */
}
.alpha1{
  filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
  background-color:#FFFFFF;
  -moz-opacity:0.8; /* Moz FF 透明度20%*/
  opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
  position:absolute;
}
时间: 2024-11-05 19:45:45

4.CSS实现背景半透明效果的相关文章

android设置背景半透明效果

1.Button或者ImageButton的背景透明或者半透明 半透明:<Button android:background="#e0000000"···> 透明:<Button android:background="#00000000"···>   颜色和不透明度 (alpha) 值以十六进制表示法表示.任何一种颜色的值范围都是 0 到 255(00 到 ff).对于 alpha,00 表示完全透明,ff 表示完全不透明.表达式顺序是“a

css设置背景半透明,文字不半透明

现在很多网站都喜欢用半透明的效果显示内容,让人看起来很舒服,不像实色背景看起来那么厚重,但是我们写效果的时候都是希望半透明只作用在背景上,所以经过试验,总结了几种让背景半透明,而文字不半透明的效果,欢迎指点和补充~~ 方法一: 以前经常用的,半透明层和文字层分离,用一个单独的标签来显示半透明层,这样文字层和半透明层互不影响,但是不好的就是增加了标签 <style type="text/css"> .opacity01 div, .opacity01 span{ width:

css实现背景渐变色效果

webkit内核的浏览器,例如(chrome,safari等) background:-webkit-gradient(linear,0 0,0 100%,from(#000000),to(#ffffff)); 第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变): 第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点.这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角): 第四个和第五个

CSS实现背景透明/半透明效果的方法

全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 其他的还有不少文章,有个不错,如何用CSS实现背景半透明效果? 内容详细如下:http://llf535.cn 龙行天下 精彩内容等着你 引用 如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一

CSS如何设置div半透明效果

CSS如何设置div半透明效果:设置元素的透明度在很多应用中都有使用,下面就介绍一下如何设置一个元素为半透明,其他的透明效果自己衍伸就可以了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

CSS实现兼容性的渐变背景(gradient)效果

一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏览器中,目前不支持Opera浏览器. 本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5. 二.IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需要使用IE的渐变

ie8兼容半透明效果css

1.opacity:0.5;(半透明效果在ie9及以上版本适用,ie8及以下不兼容) 解决办法:在css中加入filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);即可 eg:  .fb_xl li{ font-size:16px; color:#FFF; width:230px;  line-height:35px; background:#66cc97  center repeat; opacity:0.5; list-sty

兼容IE、Firefox的背景半透明内容不透明设置

首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持"filter:alpha(opacity=50)". 2.如果背景元素拥有css属性设置了z-index的值(除默认值auto外),则内容会随着背景元素一起半透明 3.如果背景元素的内容元素本身或其祖先节点(这些祖先节点是背景元素的后代节点)没有设置css定位属性position:rel