Question

仅使用HTML和CSS。

所以我画了一张大背景图片。我不想要一个丑陋的水平滚动条我将bg图像宽度设置为：100％;

我已经在一切甚至字体大小上使用了百分比。但是，无论我做什么，文本都会以较小的分辨率运行在页面上。

当分辨率较小时，背景图像也较小，因此div变得不对齐背景？

我无法让它看起来居中，不能以较小的分辨率在屏幕上运行。

请解释我做错了什么，解决方案是什么。

以下是目前的基本代码：

<img src="http://i.imgur.com/Kl5fDHa.png" class="dead" style="position: fixed;">

<img src="http://imageshack.com/a/img924/5227/cxz6vT.png" id="vacant" style="position: absolute;">



<style>

#vacant {
top: 0;
left: 0;
width: 100%;
height: auto; }

.dead {
top: 0;
left: 0;
width: 100%;
height: 100%; }

body { 
background: #071b41; }

.blink {
top: 166%;
left: 38%;
color: #66799b;
font-family: Times New Roman;
font-size: 80%;
height: 3620px;
overflow: hidden; }

</style>

<div class="blink" style="position: absolute;">
<center>

Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit. <br><br>

Fusce venenatis tortor at diam tempus, <br>
at gravida arcu placerat. <br>
Donec varius placerat justo in consequat. <br>
Ut hendrerit tellus id ultrices tincidunt. <br><br>

（文字继续沿着屏幕中心）但是在较小的分辨率上运行。

Answer 1

这是一个需要解决的简单而简单的问题。您所要做的就是从position: absolute;中移除div属性blink（<div class="blink"></div>）。

这是 jsfiddle 。

我的div在小分辨率下变得不对齐了？

1 个答案: