html - 具有全宽背景的引导容器子项
问题描述
如何让#section2 的渐变背景为全角(以填充视口的宽度)?
我使用引导程序,我想尊重这些约束:
- 没有 javascript
- 不从 <main>中删除容器类
- 不添加水平滚动(背景不应该比视口宽,即使出现垂直滚动条)
也许,有没有办法补偿容器和部分引入的边距?
body * {
border: 1px solid black;
}
section {
height: 100px;
}
#section2 {
color: white;
background: linear-gradient(180deg, blue 0%, white 100%);
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<header>header</header>
<main class="container">
<section>section 1</section>
<section id="section2">section 2</section>
<section>section 3</section>
</main>
<footer>footer</footer>
</body>
</html>
解决方案
用于Puedo Elements
这样做:
#section2:before {
content: "";
position: absolute;
height: 100px;
width: 100%;
left: 0;
background: linear-gradient(180deg, red 0%, yellow 100%);
}
代码笔: https ://codepen.io/manaskandelwal1/pen/OJRoaXZ
推荐阅读
- .net - 为什么临时段会随着逻辑 CPU 的增加而变小?
- java - Java Spring REST 调用参数
- c# - 我怎样才能避免人们使用我在文本框中支持的字符之外的其他字符?
- c# - ToString 参数错误
- html - 从 div 中剪切/遮罩三角形(旗帜形状)
- powershell - ErrorAction 在 PowerShell 脚本中默认停止
- c# - 为什么在完成“if”条件后我的“else”条件会激活(C#)
- tcl - 放置与变量匹配的线条和着色词
- ruby-on-rails-5 - 嗨,我想在 Rails 中创建两个(或更多)博客,在它们之间共享类似 WordPress 广播插件的文章
- javascript - 已解决:IE 11 中的会话存储