我可以创建此处显示的效果:
如果某个部分的某个部分被推到另一个部分的顶部,那么它通常会成为一个文本块,但是我无法找到一个很好的例子,所以我的s / s使用图像。
我知道这是一种非常常见的效果,但我不知道它的名字,所以我很难找到它的指南。如果有人可以给我这个CSS效果的名称,那就太棒了,所以我可以在网上搜索它并学习如何实现这个效果。
答案 0 :(得分:0)
在他们的情况下,他们使用绝对定位。您还可以使用transform: translate();
向上移动元素(到另一个部分)。以下是一个例子。
* {margin:0;}
section {
background: red;
height: 100vh;
position: relative;
}
section:nth-child(2) {
background: blue;
}
h1 {
background: #fff;
position: absolute;
top: -.5em;
width: 50%;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
<section></section>
<section><h1>hello</h1></section>
答案 1 :(得分:0)
你可以通过使用负上边距看看来实现这个目的:
https://jsfiddle.net/7Lb5x1he/
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
height: 200px;
border: 1px solid black;
}
div:nth-of-type(1) {
background: lightblue;
}
div:nth-of-type(2) {
background: grey;
}
div:nth-of-type(3) {
width: 60%;
margin: -300px auto 0 auto;
background: white;
}
答案 2 :(得分:0)
我在覆盖元素上使用了负边距:https://jsfiddle.net/2ezwtj1j/3/
<强> HTML 强>
<div id="landing"></div>
<div id="card">
<h1>My Sick Header</h1>
<p>My amazing content.</p>
</div>
<强> CSS 强>
#landing {
margin:0px;
padding-bottom: 200px;
background: #7703a5;
background: -moz-linear-gradient(-45deg, #7703a5 0%, #00c7ef 100%);
background: -webkit-linear-gradient(-45deg, #7703a5 0%,#00c7ef 100%);
background: linear-gradient(135deg, #7703a5 0%,#00c7ef 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7703a5', endColorstr='#00c7ef',GradientType=1 );
}
#card {
padding: 1vw;
box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
width:80%;
height:300px;
background:#fff;
margin: 0 auto;
margin-top:-100px;
font-family: sans-serif;
}