重疊的元素設計

我不得不代碼HTML/CSS這樣的事情（我還使用了框架結構）： design preview 重疊的元素設計

我試過很多方法可以使背景和圖像重疊和使用圖像的絕對定位。不知道這是否是最好的選擇，尤其是因爲當我改變瀏覽器的寬度時，設計開始崩潰，我希望它能夠響應。有沒有更好的方法來實現這個？如果不是，我如何使圖像垂直居中關於灰色背景。謝謝！

這裏是HTML/CSS文件+骨骼和影像（用於測試目的）：Dropbox folder

而這裏的純代碼。 HTML：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/skeleton.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 

 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="news twelve columns"> 
 
     <div class="imgcont seven columns"> 
 
     <img src="newsimg.jpg"> 
 
     </div> 
 
     <div class="newsimage ten columns"> 
 
     <div class="newstext six columns"> 
 
      <div class="row"> 
 
      <h2>Latest News</h2> 
 
      <h3>New video coming out soon!</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
 
      </div> 
 
      <div class="row"> 
 
      <div class="more"><a href="#">MORE</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

和CSS：

.news{ 
 
\t margin-top: 3.125em; 
 
} 
 
.newsimage{ 
 
\t position: relative; 
 
\t float: right; 
 
\t background-color: #594f4e; 
 
\t height: 100%; 
 
} 
 
.imgcont{ 
 
\t position: absolute; 
 
\t top: 6em; 
 
\t left: 0; 
 
\t z-index: 200; 
 
} 
 
.newstext{ 
 
\t float:right; 
 
} 
 
.newstext h2{ 
 
\t display: inline-block; 
 
\t font-size: 2.6em; 
 
\t text-transform: uppercase; 
 
\t float: right; 
 
\t padding: 0.5em 0.75em 0 0; 
 
\t letter-spacing: 0.02em; 
 
} 
 
.newstext h3{ 
 
\t display: inline-block; 
 
\t font-size: 2.35em; 
 
\t float: left; 
 
\t padding: 0 0.5em 0 0; 
 
\t line-height: 1.2em; 
 
} 
 
.newstext p{ 
 
\t display: inline-block; 
 
\t font-size: 1.55em; 
 
\t float: left; 
 
\t padding: 0 1em 0 0; 
 
\t line-height: 1.3em; 
 
\t margin-bottom: 0.5em; 
 
} 
 
.more{ 
 
\t display: inline-block; 
 
\t background-color: #716960; 
 
\t margin: 0 1em 1em auto; 
 
\t float: right; 
 
} 
 
.more a{ 
 
\t display: block; 
 
    color: white; 
 
    padding: 0.5em 0.75em; 
 
    text-decoration: none; 
 
\t font-size: 1.35em; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 0.03em; 
 
\t float: right; 
 

 
} 
 

 
img{max-width:100%;} 
 

 
h1, h2, h3, p{ 
 
    color: white; 
 
}

來源

2016-04-23 A.Pilk

可能的解決方案，有可能是一個更好的解決方案，我不知道skeleton.css
HTML代碼：

<div class="container"> 
<div class="row custom"> 
    <div class="news nine columns"> 
     <div class="newstext six columns"> 

     </div> 
    </div> 

</div> 
</div>

CSS-代碼：

.row.custom { 
    background: url(newsimg.jpg); 
    background-size: 40% 60%; 
    background-position: 20% center; 
    background-repeat: no-repeat; 
    margin: 50px auto; 
} 

.news.nine.columns { 
    position: relative; 
    float: right; 
    height: 100%; 
    background-color: #594f4e; 
    z-index:-1; 
}

你必須調整的背景大小，背景，地位... 說明： https://css-tricks.com/almanac/properties/b/background-size/

之後，你需要媒體查詢添加到您的CSS代碼，調整您的設計以適應更小的屏幕：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

來源

2016-04-23 23:20:32

重疊的元素設計

回答

相關問題