css透明板块怎么做

最新推荐文章于 2023-05-20 20:12:52 发布

cai-ji

最新推荐文章于 2023-05-20 20:12:52 发布

阅读量216

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_49589385/article/details/116901503

版权

笔记专栏收录该内容

14 篇文章 5 订阅

订阅专栏

想这种板块怎么做

这些透明，又发光的，是如何实现的呢
请看下面代码

body{
  background-image:url(/images/1.jpg); /*先设置一下背景*/
}

然后就到我们这个部分了

.ban{
  height:300px; /*设置高度*/
  width:400px;     /*设置宽度*/
  background-color:#FFFFFFC9;     /*颜色{这是白色透明}*/
  border:1px solid #ccc;     
  outline:0px;     
  border-color:#086DFF;     
  padding:0px 3px 200px 0px;     
  box-shadow:0px 0px 10px 0px;
}

然后总体就是

<!DOCTYPE html>
<html>
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<title>测试</title>
</head>
<body> 
<style>  
body{   
background-image:url(/images/1.jpg);      
} 
</style> 
<style>   
.ban{     
  text-align:center;     
  height:300px;     
  width:400px;     
  background-color:#FFFFFFC9;     
  border:1px solid #ccc;     
  outline:0px;     
  border-color:#086DFF;     
  padding:0px 3px 200px 0px;     
  box-shadow:0px 0px 10px 0px;      
   }  
   </style>  
   <div class="ban">  
    <p>hello</p>  
    </div>
    </body>
    </html>
    /*这里不做注解了*/