Question

如果没有滚动条，图片如何是静态的？
如何在图片中间放置一个方框？因为我必须写这个主页正在建设中。

这是主页：http://odsgaardklausen.dk/DBS/DBS.php

希望有人可以帮助我：D

来自Kamilla：D

Answer 1

在body

上添加图片作为背景

例如：

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

可以在css tricks

上找到一篇好文章

Answer 2

不使用img标记，而是将周围div上的图片设置为背景图片，并指定background-size: cover;和height: 100vh;（以及更多垂直样式）居中，请看这个答案结尾处的小提琴。）

对于中间的消息框，将另一个div放入具有背景图像的div内，并为其指定以下样式：

display: table-cell;
vertical-align: middle;
color: white;
text-align: center;

https://jsfiddle.net/eydLkepa/1/

如果您想要完整的解决方案（并且只开始调整样式）：https://jsfiddle.net/eydLkepa/3/

Answer 3

(Selector (Div or else)) { 
  background: url(image path) no-repeat center center fixed;   
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

您现在通过这样做设置背景图片，因为您可以根据您的建议应用文本样式，以便在您可以应用的中心之间显示。

(Selector for text div){
  z-index:'';
  color:'';
  font-size:'';
  top : 50%;
  left:50%;
  etc.. etc...
}

没有滚动条和框

3 个答案: