Wie drücke ich auf das Dreieck und füge den Inhalt über dem weißen Kreis ein? Ich versuche eine Lösung zu finden, um einen Heldenabschnitt mit einem Hintergrundbild zu erstellen, das drei Überlagerungsformen als Teil des Bildes enthält. Oben auf der Überlagerung befinden sich h1, p und btn. Ich habe unten einen Screenshot beigefügt, der zeigt, wie das Design aussehen wird.
Es gibt drei Overlays:
Das ist es, was ich bisher habe. Ich habe unten einen Ausschnitt eingefügt, und es gibt auch eine funktionierende Version auf Codepen. Der Kreis befindet sich an der richtigen Position in der unteren linken Ecke.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
svg {
width: 628;
height: 628:
}
.element {
position: relative;
width: 100%;
min-height: 628px;
background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
background-size: cover;
}
.element:before{
content: '';
position: absolute; bottom: 0; left: 0;
width: 100%;0
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.circle-outer {
cx: 200;
cy: 720;
fill: #fff;
fill-opacity: 0.6;
r: 420;
w: 628;
h: 628;
}
.circle-inner {
cx: 200;
cy: 720;
fill: #fff;
fill-opacity: 0.6;
r: 400;
}
.hero-triangle {
content: '';
position: relative;
width: 100%;
height: 100px;
background: #fff;
-webkit-clip-path: polygon(0 8%, 0% 100%, 100% 100%);
clip-path: polygon(0 80%, 0% 100%, 100% 100%);
z-index: 99;
}
<div class="container">
<div class="element">
<div class="hero-content">
<h1>This belongs in circle</h1>
<p>This belongs in circle too.</p>
<button class="btn btn-primary">Learn more</button>
</div>
<svg viewbox width="1000" height="580" viewBox="0 0 100 100">
<circle class="circle-outer" />
<circle class="circle-inner" />
<polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
</svg>
</div>
</div>
<div class="container">
<h4>Body content must be positioned right underneath hero image for all widths.</h4>
由于圆圈只是装饰性的而不是增加意义，因此它们没有必要成为元素。它们作为背景图像就足够了。
这是一个简单的代码片段，它放置内容元素并为其提供两个背景图像，两者都具有一定的透明度，使用径向渐变使它们成为圆形。
.element { position: relative; width: 100%; rmin-height: 628px; background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top; background-size: cover; clip-path: polygon(0 0, 0 80%, 100% 100%, 100% 0); aspect-ratio: 1296 / 728; } .hero-content { position: absolute; left: -12.5%; top: 50%; width: 70%; padding-top: 5%; box-sizing: border-box; aspect-ratio: 1 / 1; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 65%, transparent 65% 100%), radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 70%, transparent 70% 100%); background-repeat: no-repeat; background-size: 100% 100%; display: flex; align-items: center; rjustify-content: center; flex-direction: column; } .hero-content h1 { font-size: 2vw; } .hero-content p { font-size: 1vw; } .hero-content button { font-size: 1vw; }