Question

我正在尝试创建一个simlpe弹出式面具，用于显示图库图像，我需要将内部div垂直和水平居中，我还有另一个问题，我需要div容器才能有边框这完全适合图像，我正在考虑这个，我可能会在中央div中放置一个span标记。

我不想使用Javascript来执行此操作，但如果涉及到我将

无论如何，这是我到目前为止所拥有的：

HTML：

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

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

Answer 1

我认为你想要这样的东西：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>

Answer 2

如果你想要一个流畅的弹出式div，这将是一个解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

使用带边框的居中div图像创建蒙版

2 个答案: