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

标签 html css overlapping skeleton-css-boilerplate responsive

我必须在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; 
}

最佳答案

一个可能的解决方案,也许有一个更好的解决方案,我不知道skeleton.cssHTML代码:

<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

关于html - 响应式网站设计中的重叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36814489/

相关文章:

javascript - 菜单不是绝对href与位置href问题比较

html - CSS填充导航

jQuery Masonry 在 slideToggle 事件上重叠 div

javascript - Chrome 开发者工具网络选项卡中缺少视频内容

html - 如何使用CSS一对一地分隔单词

css - 对div的困惑

javascript - 获取CSS高度为0的JS或jQuery中的元素高度;

javascript - 在AngularJS中淡入div

jquery - 如何使用Ajax加载HTML和相应的CSS/JS?

html - div内容重叠