我必须在 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{
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.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
关于html - 响应式网站设计中的重叠元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36814489/