我目前正在使用CRA开发单页应用程序。我正在尝试创建一个英雄图像，该图像位于应用程序的顶部并包含一个叠加层。对于英雄图像，我正在使用背景图像。我遇到的问题是维持背景图片的整体响应能力。我希望用户无论屏幕大小如何都能够看到整个背景图像。
以下链接显示了我正在尝试实现的效果：https : //www.youtube.com/watch?v=gfzWLbAbcCw&feature=youtu.be
我的JSX代码如下：
import React from "react";
import "./styles.scss";
export default function App() {
return (
<>
<div className="container">
<div className="container-background"> </div>
<div className="content">
<div style={{ textAlign: "center", paddingTop: 20 }}>Welcome</div>
</div>
</div>
</>
);
}
我的CSS代码如下：
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://i.imgur.com/iyFtMNA.jpg');
opacity: .2;
height: 1200px;
}
.container .content {
position: relative;
z-index: 1;
}
我很难使用哪些CSS属性来达到我想要的效果。任何和所有建议都欢迎！
以下链接https://codesandbox.io/s/vigilant-wozniak-t8wmx?file=/src/styles.scss:0-391包含用于调试的沙箱
+1为codeboxsandbox我会这样实现
反应
<div className="container">
<div className="hero">
<img src="https://i.imgur.com/iyFtMNA.jpg" alt="bg" />
<div className="overlay">
<h1 className="title">Title</h1>
<h2 className="subtitle">Subtitle</h2>
</div>
</div>
<div className="content">
<div style={{ textAlign: "center", paddingTop: 20 }}>Welcome</div>
</div>
</div>
的CSS
* { margin: 0; padding: 0; }
.hero {
position: relative;
}
.hero img {
width: 100%;
opacity: .2;
}
.hero .overlay {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.container .content {
position: relative;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句