CSS 切断了我的图像答案

【问题标题】：CSS cut off my imageCSS 切断了我的图像
【发布时间】：2014-04-02 23:56:44
【问题描述】：

该网站应如下所示： http://funedit.com/imgedit/soubory/small_17663057361396452975.jpg

但它实际上看起来像： http://funedit.com/andurit/（它剪切了那个警告图像并将其移动到左侧而不是右侧。

谁能帮我解释一下我做错了什么，我是 CSS 新手

我的 HTML：

 <body> 
 <div class="top-panel">
    <div id="center"> <a class="top-button" href="#"></a>
       <span class="text">Prave hraje <b>5000</b> hracov na <b>150</b> serveroch!</span>
       <span class="panel">Registruj sa zdarma nebo</span>
        <input type="text">
        <input type="text">
        <input type="image" id="login-button" src="images/login_button.png" alt="Submit">
       <div class="tournament"> Night Cup 2014 - Sledujte priamy prenos! </div> 
    </div>
 </div>
 </body>

我的 CSS：

body {
    background-image:url('images/background.png');
    background-color:#cccccc;
    margin: 0 auto;
}
#center {
    width: 1030px;
    margin: 0 auto;
    /*display: inline-block; */
}
.top-panel {
    background-image: url("images/top_panel.png");
    background-repeat: repeat-x;
    background-position: center;
    height: 43px;
    padding-top:5px;
    display: block;
}
a.top-button {
    background-image: url("images/top_button.png");
    height: 37px;
    width: 141px;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 50px;
}
.text {
    color: #9c9c9c;
    padding: 0px 10px;
}
.panel {
    color: #6ab1ed;
    padding: 0px 350px;
    display: inline-block;
}
input{
    vertical-align:top;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    position: relative; left: 510px; top: 2px;
}
span{
    position: absolute;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;    
}
span b{
    font-weight:bold;
}
#login-button{
    /*background-image: url("images/login_button.png");   uz je to v HTML*/
    height: 27px;
    width: 81px;
    line-height: 27px;
    display: inline-block;
    position: relative; left: 510px; top: 4px; 
}
.tournament{
    background-image: url("images/warning.png");
    background-repeat: no-repeat;
    text-align: right;
    display: block;
    color: #d4d4d4;
}

【问题讨论】：

标签： html css displaytag text-align

【解决方案1】：

您正在将图像设置为背景图像。虽然“文本对齐”确实将文本向右移动，但背景图像不受此影响。

只要把代码改成：

<div class="tournament"
    <img src="..." /> 
    Night Cup 2014 - Sledujte priamz prenos!
</div>

所以它会与文本对齐。

【讨论】：

它可以解释图像的位置而不是它切人，对吗？
确实如此。 div 仅与文本一样高。并且背景图像仅在 div 可见的地方绘制。尝试使用 Chrome 开发者工具对其进行测试（右键单击 -> 检查元素）
没有其他方法可以将图像添加到 HTML 中？
向网页添加图像通常是通过向 html 添加图像来完成的。这就是的用途，对于图像 ;-)
在我看来，没有变化的图像应该是 CSS 而不是 HTML，应该有一些变化，因为你可以很容易地在某些应用程序中使用它

【解决方案2】：

尝试添加：

body { background-size: 100%;}
.tournament{
  width: 30%;
  right: 10%;
  position: absolute;
  height: 30px;
}

【讨论】：

我进行了更改，您可以实时看到它，它稍微更改了站点，但对该图标没有帮助:(
也为锦标赛添加
我讨厌这一行：<meta http-equiv="refresh" content="120"> :)
如果我这样做，它会显示整个图像，但它也会调整它的大小，我不想要它:(
将此块的大小设置为等于整个图像