Я пытаюсь добиться эффекта центрированного изображения, которое течет мимо его содержащих границ 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/
PS Я готов использовать почти все, пока это работает чисто.
Вы можете использовать display:inline-block;
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;
}
Используйте фоновое изображение 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.
}
В общем, изображения, которые являются частью пользовательского интерфейса (а не содержимого), должны быть фоном CSS, а не встроенными изображениями.