Html 使用带边框的居中div图像创建遮罩_Html_Css

Html 使用带边框的居中div图像创建遮罩

html css

Html 使用带边框的居中div图像创建遮罩,html,css,Html,Css,我正在尝试创建一个simlpe弹出式遮罩，用于显示画廊图像，我需要将内部div垂直和水平居中，我还有一个问题，我需要div容器在图像周围有一个完美的边框，我在想，我可能可以在中央分区内放置一个span标记我不希望使用Javascript来实现这一点，但如果真是这样，我会的不管怎么说，到目前为止，我得到的是： HTML: <body> <div class='screen_mask'> <div class='image_containe

我正在尝试创建一个simlpe弹出式遮罩，用于显示画廊图像，我需要将内部div垂直和水平居中，我还有一个问题，我需要div容器在图像周围有一个完美的边框，我在想，我可能可以在中央分区内放置一个span标记

我不希望使用Javascript来实现这一点，但如果真是这样，我会的

不管怎么说，到目前为止，我得到的是：

HTML:

<body>
    <div class='screen_mask'>
        <div class='image_container'></div>
    </div>
</body>

 body{background:lightgrey; }


.screen_mask{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: #000000;
    visibility: visible; text-align:center;
    background-color: rgba(43, 44, 44, 0.7);
    background: rgba(43, 44, 44, 0.7);
    color: rgba(43, 44, 44, 0.7);
}

.screen_mask .image_container{
    width:700px; margin:auto;  height:300px; border:1px solid white;       background-repeat:no-repeat; background-position:center; background-image:url('http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg');
}

我想你想要这样的东西：

正文{
背景：浅灰色；
背景色：#000000；
能见度：可见；
文本对齐：居中；
背景色：rgba（43,44,44,0.7）；
背景：rgba（43,44,44,0.7）；
颜色：rgba（43,44,44,0.7）；
}
.image\u容器{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：40%；
身高：60%；
填充：20px；
背景：浅灰色；
文本对齐：居中；
盒影：0.30pxRGBA（0,0,0,0.2）；
边框：1px纯白；
背景重复：无重复；
背景位置：中心；
背景图像：url（'http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg')
}

如果您想要流体弹出div，这将是一个解决方案：

正文{
背景：浅灰色；
}
.屏幕遮罩{
位置：相对位置；
宽度：50%；
身高：50%；
位置：绝对；/*（或相对）*/
最高：25%；
左：25%；
z指数：5000；
背景色：#000000；
能见度：可见；
文本对齐：居中；
背景色：rgba（43,44,44,0.7）；
背景：rgba（43,44,44,0.7）；
颜色：rgba（43,44,44,0.7）；
}
.screen\u mask.image\u容器{
显示：块；
位置：相对位置；
宽度：100%；
身高：100%；
边框：1px纯白；
背景重复：无重复；
背景位置：中心；
背景图像：url（'http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg');
背景尺寸：封面；
}