DIV背景：如何修复位置
我正在构建我的第一页，其中有一个部分红色背景。我正在使用div但是无法将其设置在滑块上所需的高度。期望的外观如下;
相反，div会降低，我不得不更改字体颜色以使其可见，因为您可以检查here。我尝试使用位置，背景来源，但没有得到理想的结果
HTML code：
...
<body>
<div id="redBackground">
<table align="center">
<!-- firsrt row -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900"><img src="images/logoNoBackgroundSml.png" width="90" height="93" alt="Ecomir Logo"></td></tr>
<tr><td width="auto"></td></tr>
<!-- second row -->
<tr><td width="auto"></td></tr>
<tr><td align="center" width="900">
<!-- menu definition -->
<ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;">
<li><a href="index.html">Principal</a></li>
<li><a href="historia.html">Historia y Evolución</a></li>
<li><a href="calidad.html">Calidad y Medio Ambiente</a></li>
<li><a href="">Nuestra Actividad</a>
<ul>
<li><a>Obra Actual</a>
<ul>
<li><a href=""/>Rehabilitación</a></li>
<li><a href=""/>Edificación</a></li>
<li><a href=""/>Obra Civil</a></li>
</ul>
</li>
<li><a href="">Obra Realizada</a>
<ul>
<li><a href=""/>Rehabilitación</a></li>
<li><a href=""/>Edificación</a></li>
<li><a href=""/>Obra Civil</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</td></tr>
<tr><td width="auto"></td></tr>
<!-- third row = space -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900" height="20"></td></tr>
<tr><td width="auto"></td></tr>
<!-- fourth row SlidesJS -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900">
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<img src="images/slide/example-slide-1.jpg">
<img src="images/slide/example-slide-2.jpg">
<img src="images/slide/example-slide-3.jpg">
<img src="images/slide/example-slide-4.jpg">
</div>
</div>
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 900,
height: 506,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
</td></tr>
<tr><td width="auto"></td></tr>
...
CSS：
#redBackground{
background: url(../images/redBackground.png) no-repeat center;
}
redBackground.png大小为1400x600。
5 个答案:
答案 0 :(得分：0)
这很简单，请改用此代码：
background: url(../images/redBackground.png) no-repeat top 310px center;
向我提供有关此解决方案的反馈意见。
答案 1 :(得分：0)
在您的css文件中使用
#redBackground{
background: url(../images/redBackground.png) no-repeat center;
position:fixed;
top: 100px;
}
您可以根据需要调整顶部位置。
答案 2 :(得分：0)
#redBackground{
background: url(../images/redBackground.png) no-repeat 150px center;
}
其中150px是背景的最高值。
答案 3 :(得分：0)
您也可以立即使用background-position-y或background-position-x。
例如，您可以使用background-position-y:-10px;将背景10px推到顶部。
答案 4 :(得分：0)
首先，您必须从<table>
#redBackground
<强> HTML
<div id="redBackground"></div>
<table align="center">
<!-- firsrt row -->
<tbody><tr><td width="auto"></td></tr>
<tr><td align="left" width="900"><img src="images/logoNoBackgroundSml.png" width="90" height="93" alt="Ecomir Logo"></td></tr>
<tr><td width="auto"></td></tr>
<!-- second row -->
<tr><td width="auto"></td></tr>
<tr><td align="center" width="900">
<!-- menu definition -->
<ul id="main-menu" class="sm sm-simple" style="position:relative;z-index:100;" data-smartmenus-id="13940176605568179">
<li><a href="index.html">Principal</a></li>
<li><a href="historia.html">Historia y Evolución</a></li>
<li><a href="calidad.html">Calidad y Medio Ambiente</a></li>
<li><a href="" class="has-submenu"><span class="sub-arrow">+</span>Nuestra Actividad</a>
<ul>
<li><a class="has-submenu"><span class="sub-arrow">+</span>Obra Actual</a>
<ul>
<li><a href="">Rehabilitación</a></li>
<li><a href="">Edificación</a></li>
<li><a href="">Obra Civil</a></li>
</ul>
</li>
<li><a href="" class="has-submenu"><span class="sub-arrow">+</span>Obra Realizada</a>
<ul>
<li><a href="">Rehabilitación</a></li>
<li><a href="">Edificación</a></li>
<li><a href="">Obra Civil</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</td></tr>
<tr><td width="auto"></td></tr>
<!-- third row = space -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900" height="20"></td></tr>
<tr><td width="auto"></td></tr>
<!-- fourth row SlidesJS -->
<tr><td width="auto"></td></tr>
<tr><td align="left" width="900">
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides" style="overflow: hidden; display: block;">
<div class="slidesjs-container" style="overflow: hidden; position: relative; width: 1170px; height: 657.8px;"><div class="slidesjs-control" style="position: relative; left: 0px; width: 1170px; height: 657.8px;"><img src="images/slide/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/" class="slidesjs-slide" slidesjs-index="0" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; -webkit-backface-visibility: hidden; display: none;"><img src="images/slide/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/" class="slidesjs-slide" slidesjs-index="1" style="position: absolute; top: 0px; left: -1170px; width: 100%; z-index: 0; display: block; -webkit-backface-visibility: hidden;"><img src="images/slide/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/" class="slidesjs-slide" slidesjs-index="2" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; display: block; -webkit-backface-visibility: hidden;"><img src="images/slide/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/" class="slidesjs-slide" slidesjs-index="3" style="position: absolute; top: 0px; left: 1170px; width: 100%; z-index: 0; display: block; -webkit-backface-visibility: hidden;"></div></div>
<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a><a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a><a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a><a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a><ul class="slidesjs-pagination"><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="">1</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1" class="">2</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2" class="active">3</a></li><li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3" class="">4</a></li></ul></div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
End SlidesJS Required-->
<!-- SlidesJS Required: Link to jquery.slides.j
<script src="jquery/jquery.slides.min.js"></script>
End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 900,
height: 506,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
<!-- End SlidesJS Required -->
</td></tr>
<tr><td width="auto"></td></tr>
<!-- =============================================================================== -->
<!-- ================= TEXT GOES UNDER THIS COMMENT ================= -->
<!-- =============================================================================== -->
<!-- fith row -->
<tr><td width="auto"></td></tr>
<tr><td width="900" height="auto" align="center">
<div class="columns">
<div class="left-column">
<div id="content">
<h1>Ecomir Estructuras S.L.</h1>
<h2>Página en construcción</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Texto</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</td></tr>
<tr><td width="auto"></td></tr>
<!-- sixth row: footer -->
<tr><td width="auto"></td></tr>
<tr><td width="900" align="center">
<div id="footer" data-role="content">
<table width="900" border="0" summary="Table to contain footer">
<tbody><tr>
<td width="300" align="left">
<div class="left-footer" id="left-footer" data-role="content">
<p></p>
<p class="left-footer"><font size="+1">OFICINAS CENTRALES</font></p>
<p></p>
<p class="left-footer"><font size="-1">Almirantes Matos, 35</font></p>
<p class="left-footer"><font size="-1">36002 PONTEVEDRA</font></p>
<p class="left-footer"><font size="-1">Tlfo 986869940 Fax 98685362</font></p>
</div>
</td>
<td width="300" align="center"><img src="images/eccWhite.png" width="300" height="100"></td>
<td width="300" align="right">
<div class="right-footer" id="right-footer" data-role="content">
<p><font size="+1">ECOMIR ESTRUCTURAS SL</font></p>
<p></p>
<font size="-1">
<p>estructuras construcciones y contratas</p>
<p>info@ecomir.es</p></font>
</div>
</td>
</tr>
</tbody></table>
</div>
</td></tr>
<tr><td width="auto"></td></tr>
</tbody></table>
和CSS：
#redBackground {
background: red; /* not the exact color, fell free to change it. */
width: 100%;
position: absolute;
left: 0;
height: 700px;
top: 290px;
}
一些注意事项：
- 您不需要使用大图片来填充颜色的元素。
background属性将完成工作 - 永远不要将
<table>用于您的布局，仅用于表格信息。你的代码不是标准的，肯定会破坏某些浏览器 - 尊重HTML流程。如果你想要一个元素独立于流（那里：你的红色背景），只需将它放出流程（不包括那里的内容）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？