Question

我正在尝试实现一个居中的图像流过其包含div的边框，但不使用position：absolute，因为它隐藏了它后面的标题按钮。有没有干净的方法可以做到这一点，而不是只使用旧学校的绝对位置与所有元素（如果我尝试做任何响应，这将是一个真正的痛苦）？

相关代码：

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

#logo {
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%;
    width: 150px;
    margin-left: -75px; 
}

JSFiddle：http://jsfiddle.net/bH35r/

P.S。只要干净利落地完成工作，我愿意利用几乎任何东西。

Answer 1

使用CSS背景图片。

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
    background-image:url(....);
    background-repeat-no-repeat;
    background-position: 0px 0px; <--- adjust accordingly.
}

通常，作为UI（不是内容）一部分的图像应该是CSS背景，而不是内联图像。

Answer 2

您可以使用display:inline-block;

<强> FIDDLE

HTML：

<div class="section header">
    <div class="container no-border">
        <a class="header" href="#">About</a>
        <a class="header" href="#">News</a>
        <a class="header" href="#">Teams</a>
        <div class="logo_wrap">
            <img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
        </div>
        <a class="header" href="#">Apparel</a>
        <a class="header" href="#">Sponsorship</a>
        <a class="header" href="#">Contact</a>
    </div>
</div>

CSS：

body {
    margin: 0;
    font-family: Helvetica;
    font-size: 100%;
    background-color: #191A18;
}

.section {
    margin: 0;
    padding: 0;
    clear: both;
}

.section.header {
    background-image: url('../images/background.png');
    background-position: 50% 90%;
    border-bottom: 1px solid #A8A8A8;
    box-shadow: 0 1rem 1rem #000;
    text-align: center;
}

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

.container.logo {
    background-image: url('../images/main-image.jpg');
    background-position: 50% 20%;
    min-height: 20rem;
}

a.header {
    color: white;
    display:inline-block;
    text-decoration: none;
    padding: 3rem 1.5rem;
    margin: 0 0.5rem;
    background-color: rgba(255,255,255,0.1);
}

#logo {
    width: 150px;

}
.logo_wrap{
    display: inline-block; 
    height: 5.5rem;
    vertical-align:top;
    overflow:visible;
}

在没有绝对位置的情况下实现溢出中心

2 个答案: