个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 03:31:46 25 4
gpt4 key购买 nike

我正在尝试创建一个用于显示图库图像的简单弹出式蒙版，我需要将内部 div 垂直和水平居中，我还有另一个问题，我需要 div 容器有边框非常适合图像，为此我在考虑是否可以在中央 div 中放置一个 span 标签。

我宁愿不使用 Javascript 来做这件事，但如果涉及到这一点，我会的

无论如何，这是我目前所拥有的:

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

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

最佳答案

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

关于html - 使用带边框的居中 div 图像创建蒙版，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26201652/

25 4 0
文章推荐： html - 自动将div居中
文章推荐： c - 通过 pipe() 从子进程接收到正确结果后程序挂起
文章推荐： c - 使用 pipe() : How do I allow multiple child processes to execute simultaneously
文章推荐： c - 在内核中查找未知类型内存的大小
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com