Question

我有以下CSS：

<style type="text/css">
body {background-color:#b32501;}
.roundcorner {
position:absolute;
    background-color: #000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border: 0px solid #000;
    padding: 10px;
    width: 350px;
    bottom:35%;
    right:500px;    
}


input
{
    -webkit-border-radius: 5px; //For Safari, etc.
    -moz-border-radius: 5px; //For Mozilla, etc.
    border-radius: 5px; 
}
.centeredSplash {

    position:relative;
    width:100%; 
       height:100%; 
       background:url(coming-soon.png) center center no-repeat;

}

</style>

关注HTML：

<div class="centeredSplash">

    <div class="roundcorner">
        <input type="text" style="width:80%"></input>
    </div>

</div>

我的基本要求是我有一个800x600的初始背景，并为HTML文本框留空空间。

我需要将初始背景置于中心位置（无论分辨率如何），然后我需要将文本框放在相对于图像的位置，以便它始终显示在该特定位置。

使用上面的代码我能够实现这一点，但是一旦我缩小浏览器的大小，我就注意到我的文本框开始移开并失去其位置，有人可以帮我解决这个问题吗？

Answer 1

你应该添加

body {min-width: 800px;}

工作演示： JSFIddle

通过CSS中心图像

1 个答案: