創建具有邊框的居中div圖像的蒙版

我正在嘗試創建一個simlpe彈出蒙版以顯示圖庫圖像，並且我需要將內部div垂直和水平居中，我還有另一個問題在哪裏我需要div容器有一個完全符合圖像的邊框，我在想這個，我可以在中央div裏面放一個span標籤。創建具有邊框的居中div圖像的蒙版

我寧願不使用JavaScript來做到這一點，但如果涉及到，我會

反正這裏是我到目前爲止有：

http://jsfiddle.net/swmhtgx5/7/

HTML：

CSS：

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'); 
}

來源

2014-10-05 mk_89

我想你想這樣的事情：http://jsfiddle.net/csdtesting/4ajzmwq7/

body { 
 
    background: lightgrey; 
 
    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); 
 
} 
 
.image_container{ 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 40%; 
 
    height: 60%; 
 
    padding: 20px; 
 
    background: lightgrey; 
 
    text-align: center; 
 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); 
 
    border: 1px solid white; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-image: url('http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg') 
 
}

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

來源

2014-10-05 10:44:01

如果你想有一個流體彈出DIV，這將是一個解決方案：

body { 
 
    background:lightgrey; 
 
} 
 
.screen_mask { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 50%; 
 
    position: absolute;/*(or relative)*/ 
 
    top: 25%; 
 
    left: 25%; 
 
    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 { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    height:100%; 
 
    border:1px solid white; 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    background-image:url('http://rendezvouswithrenee.files.wordpress.com/2012/11/stars.jpg'); 
 
    background-size:cover; 
 
}

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

來源

2014-10-05 10:50:54 dippas

創建具有邊框的居中div圖像的蒙版

回答

相關問題