CSS中的对角线背景（响应式）答案

【问题标题】：Diagonal background in CSS (Responsive)CSS中的对角线背景（响应式）
【发布时间】：2020-11-26 03:40:12
【问题描述】：

这是我首先要实现的目标的图像：https://i.imgur.com/bTsL2wS.png

请注意，这应该只是整个页面的一个部分。背景不应跨越整个网站。但是，每个部分都有全屏尺寸。

我对此有两个想法：

拥有一个具有视口尺寸的容器对象，并添加一个带有z-index: -1 的relative 定位图像，并在其内部添加一个带有img 的absolute 定位图像img 和~60% 宽度，然后旋转它。
与上述相同，但将 img 放在 60% 宽度的右对齐子容器内并倾斜容器。

这两种方法都适用于桌面屏幕，但this 会在窗口缩小太多时发生。基本上我需要它工作，直到视口达到平板电脑/移动设备的大小。

【问题讨论】：

标签： html css image responsive-design

【解决方案1】：

将您想要的部分与该背景包装在一个 div 中，然后将 background-image 属性添加到该 div。

【讨论】：

【解决方案2】：

*{ box-sizing: border-box}
#blue{ background: #269;}
#red{ background: #a22;}
#green{ background: #6a6; }
section{ display: block; height: 100vh; margin: 2% auto; color: #fff; font: normal 16px verdana, sans-serif; text-align: center; }
div{ height: 100%; width: 70%; overflow: hidden; float: right;}
img{ transform: rotate(70deg); height: 920px;  margin: -120px 0 auto; }
h1, p{ margin: 5% auto 0 0; width: 40%;}
@media only screen and (min-height: 500px){ h1, p{ margin: 30% auto 0 0 }}
span{ position: absolute; left: 2%; z-index: 2; background: rgba(0,0,0,0); height: 100vh; width: 96%; padding: 20px }

css 仅用于测试

span::before{ content: 'this is span'}
p::after{ content: 'this is pafagraph'; display: block; padding: 20px 0 0}
h1::after{ content: 'this is h1'}
section:hover h1, section:hover p{ background: grey}
span:hover{ background: rgba(0,0,0,0.5); }

<section id="blue"><div><img src="img.jpg" alt="blue"></div><span><h1></h1><p></p></span></section>
<section id="red"><div><img src="red.jpg" alt="red"></div><span><p></p></span></section>
<section id="green"><div><img src="green.jpg" alt="green"></div></section>

响应性是一个古老的故事，移动优先是最新的。当然有响应式解决方案，但@media 仅适用于较大的设备。你最好不要使用 flex，它泄漏得很厉害。

【讨论】：