Question

我为横幅添加了图片。在我的一个代码中它工作正常，但是当我在另一个代码中包含相同的横幅时，它不能正常工作。你能告诉我原因吗？在我的新代码中，我看到横幅外面的空白区域。

http://jsfiddle.net/rajkumart08/y88WX/29/embedded/result/

.home .hero-unit {
    background: none;
    height: 318px;
    padding: 1px 620px 0 0;
    margin-right: -100px;
    margin-left: -100px;
    margin-bottom: 0;
    background: url("http://www.defie.co/designerImages/defie_landing_page.png") right bottom no-repeat;
}

.hero-unit {
    padding: 60px;
    margin-bottom: 30px;
    background-color: #eee;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

Answer 1

.hero-unit只有1250像素，您的背景图像在该容器中声明。尴尬的边缘是文本没有叠加在图像上的原因。在div中定义背景，实际上是屏幕的100％。另请注意，.container不是屏幕的100％。创建一个包含容器的新div和带有背景图像的.hero-unit。

Answer 2

删除正在包装'.hero-unit'的'.container'选择器上设置的宽度。

或者你可以在'.hero-unit'

中嵌入'.container'

<div class="hero-unit'>
    <div class="container"> // Banner text etc </div>
</div><!-- /hero-unit -->

横幅图片的宽度应为100％

2 个答案: