div透明(div不透明)

http://www.itjxue.com  2023-01-26 16:59  来源:未知  点击次数: 

设置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。

(责任编辑:IT教学网)

更多