在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ css中fixed如何定位在屏幕的正中間,并在周圍生成一個(gè)半透明的黑色遮罩??

css中fixed如何定位在屏幕的正中間,并在周圍生成一個(gè)半透明的黑色遮罩??

圖片描述

    <div id ="contract_template_select">
        <div id="template_title">選擇模板</div>

    </div>
回答
編輯回答
久礙你

謝邀
如果已知盒子div的width 和 height, 可以試試

div{
    position:fixed;
    left:50%;
    margin-left:- div的width的一半;
    top:50%;
    margin-top: - div的height的一半;
}

至于題主要的半透明黑色遮罩 可以使用::after

div::after{
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.3);
    top: 0;
    left: 0;
    z-index: 0;
}

居中的方法還有挺多的 可以參考 《CSS制作水平垂直居中對(duì)齊》

2017年6月14日 09:50
編輯回答
命于你
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0 0 2px 12px rgba(0,0,0,0.5); // 參數(shù)隨便改
2017年9月15日 14:53
編輯回答
抱緊我
<div class="mask">
  <div class="dialog"></div>
</div>

.mask {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .3)
}
.dialog {
   // 寬高必須要聲明,對(duì)于寬高不固定這個(gè)方法不適用
   width: 200px;
   height: 200px;
   border-radius: 5px;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}
2017年10月1日 16:02
編輯回答
不將就
<div class='center-block'>
   <span class='Hello World'>
</div>

居中顯示:
1.如果div的寬高已知

.center-block{
    position:fixed;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin-left:-100px;
    margin-top: -50px;
}

2.如果div的寬度未知

.center-block{
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

至于陰影遮罩

.center-block{
  z-index:3   
}
.center-block:after{
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 2;   //z-index比div小
 }
2017年11月14日 23:56
編輯回答
深記你
postion:fixed;
left: 50% - 盒子框都的一半;
height:屏幕高度的一半 - 盒子高的一半  用JS獲取就行
陰影可以為box-shadow  或者text-shadow 
2017年10月4日 22:47