个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
<分区>
我有一个带有曲线背景的着陆页。请引用下图。我想知道从 CSS 编码时的最佳方法。我还需要使其具有响应性，并且我正在使用 bootstrap 作为 CSS 框架。以下是我所做的。
我使用了 SVG 图像作为背景，并将其与 :before 伪类一起使用以显示在底部。而且我还从 SVG 中删除了宽度和高度并保留了 View 框并向 SVG 添加了 preserveAspectRatio="xMinYMin meet"以使其响应。 (请注意这些属性没有添加到 JSFiddle 的示例中)
创建这些曲线背景的最佳方法是什么？
.hero-container {
background-image: url(https://images.unsplash.com/photo-1581362508717-f542c1ecf295?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
padding: 16.625rem 0;
}
.hero-container:after {
content: url('http://svgshare.com/i/Hud.svg');
position: absolute;
width: 100%;
height: auto;
bottom: -85px;
}<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<section class="hero-container position-relative">
<div class="container">
<div class="row">
<div class="col-md-7 col-xs-12">
<h1 class="mb-3">Lorem ipsum dolor sit amet</h1>
<p class="mb-4 text-white">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
<button class="btn btn-secondary">Register My Club</button>
</div>
</div>
</div>
</section> 
24
4
0
我是一名优秀的程序员,十分优秀！