如何在在html代码中实现图层透明_随笔

图层透明可能有3种可能。

图层没有背景色或背景图片，其本身就是透明的，其中有文字、图片不透明，没有内容的区域可以直接看到下一层。

通过CSS样式表设置

filter:alpha(Opacity=50) /*IE支持，取值0-100*/

opacity: 0.5 /*HTML5浏览器，取值0-1*/

这种方法包括背景，内容的文字、图片、边框都会变为半透明。

3、做一张PNG图片，PNG图片支持透明和半透明甚至渐变透明。图层以这张图片作为背景。和第一种情况一样，背景是透明或半透明的，但内容是不透明的。

<!DOCTYPE HTML>

<html>

<head>

<title>简单透明度渐变</title>

</head>

*{margin:0padding:0}

#oDiv{width:200pxheight:200pxmargin:0 autobackground:#000}

</style>

<body>

</body>

window.onload = function(){

var timer = setInterval(colorLiner,20)

var val = 100

function colorLiner(){

if(val >= 0){

var oDiv = document.getElementById('oDiv')

oDiv.style.opacity = val/100

val--

}

</script>

</html>

1、打开html开发工具，新建一个html文件在html代码页面创建一个<div>并给这个标签添加一个类名linear：

2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数是设置渐变的方向，后面两个参数是起始颜色和终止颜色。设置好后去浏览器查看效果：

3、保存好html文件后使用浏览器查看效果。就会看到一个绿色到红色的渐变了。以上就是html中让背景颜色渐变的设置方法介绍：

欢迎分享，转载请注明来源：内存溢出

如何在在html代码中实现图层透明