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

我必须在html/css中编写这样的东西（我也使用Skeleton框架）：设计预览

我尝试了很多方法使背景和图像重叠，并对图像使用了绝对定位。不确定这是否是最佳选择，特别是因为当我更改浏览器的宽度时，设计开始分崩离析，我希望它具有响应能力。有没有更好的方法来实现这一点？如果没有，如何使图像相对于灰色背景垂直居中。谢谢！

以下是html/css文件+框架和图像（用于测试目的）： Dropbox 文件夹

这是纯代码。.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; 
}

一个可能的解决方案，可能有更好的解决方案，我不知道骨架.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-position/https://css-tricks.com/almanac/properties/b/background-size/

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

相关内容

最新更新

热门标签：