1

我有以下 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 文本框。

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

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

4

1 回答 1

1

你应该添加

body {min-width: 800px;}

工作演示： JSFIddle

于 2013-08-04T06:08:01.187 回答