html - CSS 截断了我的图像-6ren

html - CSS 截断了我的图像

转载作者：行者123 更新时间：2023-11-28 10:50:29

27

4

该站点应如下所示: 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;
}

最佳答案

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

把代码改成:

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

所以它会与文本对齐。

关于html - CSS 截断了我的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22816467/

27

4

0

文章推荐： javascript - 通过表搜索的日期选择器值？

文章推荐： html - div总是从父级获取行高

文章推荐： arrays - Swift 追加到二维数组

netcdf - 截断 netCDF
我有一个 1850-2005 年月地表气温的 netCDF 文件。如何在 unix 中截断文件，以便新文件的时间维度从 1855 年到 2005 年？反之亦然，截断文件，使其改为 1850-2000？
sql - 批量加载数据转换错误(截断)
我收到此错误 Bulk load data conversion error (truncation) for row 1, column 12 (is_download) 这是 csv...它只有一
python - 截断/修剪列表每一行的日期和时间
我有一个列表，它是电子邮件正文，每行末尾都有一个日期和时间戳。邮票的格式是一致的，所以可以从右边计算表达式。以下是示例数据: Dear Volunteer2018-05-21 19:59:15 You
Django HTML 截断
我正在使用内置 truncatewords_html Django 的过滤器，它在最后添加了“...”，相反，我想用“查看更多”链接替换它。我怎样才能做到这一点？最佳答案最好编写自己的过滤器。您
sql - ORA删除/截断
我正在使用 SQL 加载器将我的数据加载到数据库中。在插入数据之前，我需要删除表中的现有数据: options(skip=1,load=250000,errors=0,ROWS=30000,BIND
c - 消息队列中的输出被更改/截断
我正在尝试掌握消息队列的窍门。由于某种原因，当显示我在控制台中输入的消息时，字符串有时会被截断或更改。有谁知道为什么会发生这种情况？ void *readFromQueue() { int r
mysql - 截断 mediawiki
我正在使用mediawiki API(例如http://en.wikipedia.org/w/api.php)，我希望能够“截断”mysql表以便重置本地安装，同时保留一些表(用户，？...) 。SQ
MySQL:如果存在...截断
想要截断一个存在的表: IF EXISTS(SELECT 1 FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_NAME = 'mytable') TRUNCATE
python - Numpy 截断？
我正在实现一个使用 Python Numpy 包的程序。我正在尝试修改数组的元素，以便我只需采用 elem[i][j] 并将其设置为 elem[i][j]/10。但是，我不断收到某种截断，其中元素在操
转换为较小类型时 C++ 截断
我有一个 64 位 long int，其中包含一些位域。我需要将存储在第二个和第三个字节中的 16 位带符号整数添加到一个 32 位值中。我正在使用这样的东西: u32 Function( s32 v
ios - UILabel 截断
我有这样的文字:“我的文字是 blabla blabla, lala lala”。我希望在我的 UILabel 中有这样的文本:“My text is ...lala”。如何配置我的 UILabe
html - Umbraco 截断
Umbraco Truncate 似乎不适合我，当我使用正确的代码(根据互联网)时，它会不断出错。我不知道它有什么问题。错误代码: Compiler Error Message: CS1502: T
文本溢出 CSS 截断
早些时候，我是使用 JS 动态地完成它的。但是我们遇到了一些性能问题，因为我们必须提供一个替代选项。我现在使用文本溢出样式截断选项卡名称上的长文本。但我有一个小问题，如果有人能解决的话目前这是我
ruby - 截断、事务和删除数据库策略之间的区别
使用Rspec时截断、事务和删除数据库策略有什么区别？我找不到任何资源来解释这一点。我阅读了 Database Cleaner 自述文件，但它没有解释它们各自的作用。为什么我们必须对 capybar
较完美的WordPress文章摘要(截断)方案分享
当然, 尚有诸位前辈也曾把以上三种方案结合一二, 以达到更广泛的适应度. 不过, 这厢先前在网路上搜索许久, 却未曾寻到三种方案合为一体的尝试, 于是只好自己动手写一下了:) 没有dem
hsqldb - 截断 HSQLDB 中的所有表
有没有办法截断HSQLDB中的所有表？如果这不可能，是否有任何方法可以级联删除具有外键引用的表？最佳答案可以截断模式中的所有表: 截断模式并提交此命令有一些选项在指南中有描述: http://
sql - 带有时间戳的 Oracle 截断
我有一个要截断的时间戳。我正在使用 trunc oracle中的函数。这似乎做了我想要的但是从文档中它应该只接受日期而不是时间戳 select TRUNC(TO_DATE('22-AUG-13'),
cassandra - cassandra 键空间的在线批量删除(截断)
我读到一旦你耗尽了一个节点，你就可以删除文件然后重新启动。它工作正常，但我只是通过排空所有节点，关闭整个集群，删除文件并重新启动来尝试它。如果我一次只重启一个节点会怎样？据我了解有风险重新启动的
text - 截断 d3 中的文本
我想截断 d3 中超过预定义限制的文本。我不知道该怎么做。这是我现在所拥有的: node.append("text") .attr("dx", 20) .attr("dy", ".20
WPF 文本 block 截断
嗨 Guyz 我有一个固定宽度的 WPF TextBlock 说 100 ，如果字符串不适合宽度，则最后一个字符总是被截断，因为所有字符的大小都不相同。我不想剪切字符而是我想从那里跳过文本并只显示没有

首页

博学

6Ren·AI

商城

html - CSS 截断了我的图像