Question

我必须在html / css中编写类似的东西（我也使用Skeleton框架）： 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{
	margin-top: 3.125em;
}
.newsimage{
	position: relative;
	float: right;
	background-color: #594f4e;
	height: 100%;
}
.imgcont{
	position: absolute;
	top: 6em;
	left: 0;
	z-index: 200;
}
.newstext{
	float:right;
}
.newstext h2{
	display: inline-block;
	font-size: 2.6em;
	text-transform: uppercase;
	float: right;
	padding: 0.5em 0.75em 0 0;
	letter-spacing: 0.02em;
}
.newstext h3{
	display: inline-block;
	font-size: 2.35em;
	float: left;
	padding: 0 0.5em 0 0;
	line-height: 1.2em;
}
.newstext p{
	display: inline-block;
	font-size: 1.55em;
	float: left;
	padding: 0 1em 0 0;
	line-height: 1.3em;
	margin-bottom: 0.5em;
}
.more{
	display: inline-block;
	background-color: #716960;
	margin: 0 1em 1em auto;
	float: right;
}
.more a{
	display: block;
    color: white;
    padding: 0.5em 0.75em;
    text-decoration: none;
	font-size: 1.35em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	float: right;

}

img{max-width:100%;}

h1, h2, h3, p{
  color: white; 
}

Answer 1

一个可能的解决方案，可能有一个更好的解决方案，我不知道skeleton.css
HTML-Code：

<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-position/ https://css-tricks.com/almanac/properties/b/background-size/

之后，您需要向CSS代码添加媒体查询，以便针对较小的屏幕调整您的设计：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

响应式网站设计中的重叠元素

1 个答案: