Trang chủ chia bố cục (CSS)

Question

Tôi muốn tạo trang chủ này cho trang web của mình chỉ chấp nhận tiện ích bổ sung html/css mà không sửa lại bất kỳ quy tắc nào khác.

Chỉ đạt khiến các khối tự nhưng không có đầu mối về cách đưa hình ảnh đằng sau các nút, tập trung tất cả mọi thứ lên và làm cho nó đáp ứng ...

Bất kỳ đỉnh?

Homepage intended trang liên kết: www.lluisballbe.smugmug.com

Mã sử ​​dụng đã là ở đây:

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
} 
 

 
#business-top { 
 
    display: flex; 
 
    flex: 1; 
 
    width: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    background:turquoise; 
 
} 
 

 
#business-button { 
 
    height: 3em; 
 
    width: 12em; 
 
    background-color: #2B2A2A; 
 
    border: .2em solid #ff7600; 
 
    border-radius: 1.8em; 
 
    margin: auto; 
 
} 
 

 
#logo-separator { 
 
    text-align: center; 
 
} 
 

 
.separator { 
 
    display: block; 
 
    position: relative; 
 
    padding: 0; 
 
    height: 0; 
 
    width: 100%; 
 
    max-height: 0; 
 
    font-size: 1px; 
 
    line-height: 0; 
 
    flex: 0; 
 
    border-top: 1px solid #ff7600; 
 
    border-bottom: 1px solid #ff7600; 
 
} 
 

 
#logo { 
 
    margin: auto; 
 
    max-width: 150px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    margin: -75px; 
 
    position: absolute; 
 
    z-index:1; 
 
} 
 

 
#photography-bottom { 
 
    display: flex; 
 
    flex: 1; 
 
    width: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background:gray; 
 
} 
 

 
#photography-button { 
 
    height: 3em; 
 
    width: 12em; 
 
    background-color: #2B2A2A; 
 
    border: .2em solid #ff7600; 
 
    border-radius: 1.8em; 
 
    margin: auto; 
 
} 
 

 
h1 { 
 
    color: #ff7600; 
 
    text-align: center; 
 
    font-size: 1.4em; 
 
    vertical-align: middle; 
 
    line-height: 2.2em 
 
} 
 

 
#business-top, 
 
#photography-bottom { 
 
    pointer-events: none; 
 
    position: relative; 
 
    transition: 1s; 
 
    min-height: 200px; 
 
} 
 

 
#business-top a, 
 
#photography-bottom a { 
 
    pointer-events: auto; 
 
} 
 

 
#business-top:hover, 
 
#photography-bottom:hover { 
 
    flex: 3; 
 
} 
 

 
#business-top a:hover:before, 
 
#photography-bottom a:hover:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="business-top"> 
 
    <a href="www.lluisballbe.smugmug.com"> 
 
    <div id="business-button"> 
 
     <h1>BUSINESS</h1> 
 
    </div> 
 
    </a> 
 
</div> 
 

 
<div id="logo-separator"> 
 
    <div class="separator"></div> 
 
    <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div> 
 
</div> 
 

 
<div id="photography-bottom"> 
 
    <a href="www.lluisballbe.smugmug.com"> 
 
    <div id="photography-button"> 
 
     <h1>PHOTOGRAPHY</h1> 
 
    </div> 
 
    </a> 
 
</div>

hình ảnh được sử dụng (mỗi nên bao gồm 50%, có thể thay đổi kích thước chúng và thay đổi kích thước pixel nếu cần): https://dl.dropboxusercontent.com/u/54898895/Public.rar [Top Image] [3]

[dưới hình ảnh] [4]

Answer 1

tôi muốn làm điều đó theo cách này:

1. Thêm height: 50vh; để #business-top và #photography-bottom cho cả hai container outter.
2. Cho container của bạn tùy chỉnh của bạn background-ảnh: background-image: url('url to image');
3. Hãy chắc chắn rằng những hình ảnh có background-size: cover;
4. Thêm bạn #logo-separator với position:absolute; và top: calc(50% - (height_of_sperator)px;