DIVcss背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变

最新推荐文章于 2022-06-13 19:46:51 发布

ufojoan

最新推荐文章于 2022-06-13 19:46:51 发布

阅读量1k

点赞数

分类专栏：前端

前端专栏收录该内容

98 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS test</title>
<style type="text/css">
body
{
margin: 0; 
background-image: url('images/bg1.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#header
{
}
#inner-header
{
margin: 0 auto;
width: 960px;
background-color: Gray;
height: 80px; 
box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}
#main
{
background-color: Gray;
margin: 10 auto;
width: 960px;
min-height: 500px;
height: auto; 
filter: alpha(opacity=70); 
-moz-opacity: 0.7; 
opacity: 0.7; 
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#footer
{
margin: 0 auto;
width: 960px;
height: 100px; 
filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); 
background-color: Gray; 
background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background: -o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
</style>
<!--[if IE]>
<style type="text/css">
#main
{
height: 500px;
}
body
{
text-align:center;
}
#inner-header
{
text-align:left;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="inner-header">
<h1>
CSS Demo</h1>
</div>
</div>
<div id="main">
</div>
<div id="footer">
</div>
</body>
</html>

ufojoan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIVcss背景图片固定居中，div阴影，背景半透明，div圆角，DIV渐变

CSS testbody{margin: 0; background-image: url('images/bg1.jpg');background-attachment: fixed;background-position: center;background-repeat: no-repeat;}#header{}#inner-header{margin: 0 a
复制链接

扫一扫