css图片上有一层透明颜色移动

html-css028

css图片上有一层透明颜色移动,第1张

可以去除。css图片是一种新颖的图片格式,上有一层透明颜色移动是可以去除的。css层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

<html>

<head><title>图片,透明层,文字</title>

<style>

#box1{

float:left/*浮动定位和相对定位都可以,我这里用的是浮动定位。*/

width:20%

height:15em

margin-left:3%

margin-top:3%

}

#box2{

float:left/*浮动定位和相对定位都可以,我这里用的是浮动定位。*/

width:100%

height:100%

border:1px solid black/*给图片做个边框*/

overflow:hidden/*不准溢出来,做动画效果的时候可能会溢出来,溢出来的部分隐藏起来。*/

}

#picimg{

float:left/*浮动定位和相对定位都可以,我这里用的是浮动定位。*/

width:100%

height:100%

}

#touming{

position:relative/*这个透明层尽量用相对定位,这样不会跑来跑去,原因目前还不怎么清楚,反正相对ok*/

clear:both/*清除浮动效果,避免到时候到处乱跑,比如做了过渡动画的时候。*/

width:100%

height:1.5em

top:-13.5em

background:gray

filter:alpha(Opacity=30)/*设置透明效果30*/

-moz-opacity:0.3/*设置透明效果0.3*/

opacity: 0.3/*设置透明效果0.3*/

left:0/*距离box1距离是0,实际上距离box2的距离也是0*/

}

#words{

position:relative/*这里用相对定位*/

clear:both/*清除浮动,这个很有必要,不清除浮动会到处乱跑的。*/

width:100%/*相对于box1的宽度,实际上也等于box2的宽度*/

height:2em

color:red/*设置文字颜色为红色,你自己喜欢什么颜色就弄什么颜色,我比较喜欢红色。*/

top:-15em/设置成负的,把文字提到box2上面去/

left:0/*相对于box1,左边距离设置成0*/

text-align:center

}

</style>

</head>

<body>

<div id="box1">

<div id="box2">

<img id="picimg" src="https://www.baidu.com/img/bd_logo1.png">

</div>

<div id="touming"></div>

<div id="words">这里是要显示的文字</div>

</div>

</body>

</html>

效果图:

效果还不错,透明层有透明效果,文字可以正常显示出来。这个方法还行吧,哈哈。我还会用三个div画一个心形,好看得很哟!!@