div透明(div不透明)
设置DIV透明度
在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持,需要把两种设定都加进去。
用下面的样式表定义你的div可以有各种过度效果。.alpha是div的class
.alpha { filter: alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100}
解释:
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式,从0开始,1.2.3....有均匀透明,放射形状透明...?
StartX=开始透明的X坐标,基本上为图片、层的左上角(0)
StartY= 开始透明的Y坐标,基本上也为图片、层的左上角(0)
FinishX=结束透明的X坐标,基本上也图片、层的右下(图片、层的宽度)
FinishY=结束透明的Y坐标,基本上也为图片、层的右下角(图片、层的高度)
如何将div设置为透明
css中有一个opacity属性,可以设置透明度
如下例子,其中div透明度为60%
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
style
.div1{width: 200px;height: 200px; opacity: 0.6;background: red;}
/style
/head
body
div class="div1"/div
/body
/html
前端怎么将一个div设置成透明的呢?
div设置成透明的,可以使用background属性,把background设置为transparent即可。
设置div背景透明的方法?
opacity和rgba都是设置透明度的,区别在于opacity是整体的透明度,标签本身及标签内容还有标签的子元素都会受到影响。rgba仅仅是改变元素的添加背景色,内容及子元素不受影响。
div class="test tstop"233/div
div class="test tstrgba"666/div
.test {width: 200px; height: 200px}
.tstop {background: red; opacity: 0.6}
.tstrgba {background: rgba(255, 0, 0, 0.6)}
可以实际体验一下。
如何设置div的透明度但是其中的文字不透明
如何设置div的透明度但是其中的文字不透明:
设置div透明度的时候可能很多朋友会遇到这样一个问题,那就是对象中的文字也被产生了透明现象,也不能说事缺陷,也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果,但是文字不透。代码实例如下:
!DOCTYPE html
html
head
meta charset=" utf-8"
meta name="author" content="" /
title蚂蚁部落/title
style type="text/CSS"
*{
margin:0px;
padding:0px;
}
.opacity{
width:150px;
height:150px;
background-color:green;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
margin-left:20px;
margin-top:20px;
}
span{
display:block;
width:80px;
height:80px;
}
/style
/head
body
div class="opacity"
span蚂蚁部落/span
/div
/body
/html
上面的代码将第二个div设置为半透明,但是文字也出现了透明现象。那么这里改造一下代码:
!DOCTYPE html
html
head
meta charset=" utf-8"
meta name="author" content="" /
title蚂蚁部落/title
style type="text/css"
*{
margin:0px;
padding:0px;
}
.opacity{
width:150px;
height:150px;
background-color:green;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
margin-left:20px;
margin-top:20px;
}
span{
display:block;
width:80px;
height:80px;
position:absolute;
top:20px;
left:20px;
}
/style
/head
body
div class="opacity"/div
span蚂蚁部落/span
/body
/html
以上代码实现了需要的效果。方法就是讲span元素从div取出来,使用绝对定位的方式,再将span元素定位到原来在div元素的位置。
怎么让div透明,上面的文字不透明?
设置div透明度的时候可能会遇到这样一个问题,那就是对象中的文字也被产生了透明现象,也不能说事缺陷,也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果,但是文字不透。
rgba(),css3里才有的,所有只有支持css3的浏览器才支持,a是指透明度,取值0.0-1。
如果用opacity就感觉文字也透明了。影响外观,阅读。
还有一种兼容的方法,主要兼容不支持使用rgba()格式值的浏览器。
DIV本身就是块级元素,不需要设置。
如果想要行内元素变成块级元素:display:block;
如果想要块级元素变成行内元素:dispaly:inline。