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

Question

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

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

关于这样做，我有两个想法：

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

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

Answer 1

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

Answer 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，它会严重泄漏。