css - ReactJS 和渲染问题
问题描述
我只是使用 ReactJS 创建一个 Web 应用程序,但问题是,背景图像没有正确呈现。
下面给出的是代码片段。
class WeatherComponent extends Component{
constructor(props){
super(props);
this.state={
key: 'XXXXXXXXX',
place: 'New York',
temperature: '17',
description: 'Light Rain'
}
this.handleSubmit=this.handleSubmit.bind(this);
this.update=this.update.bind(this);
}
update(values){
this.setState({ temperature: values.current.temperature })
this.setState({ description: values.current.weather_descriptions[0] })
}
handleSubmit(value){
fetch('http://api.weatherstack.com/current?access_key=' + this.state.key +'&query='+ value.place)
.then(response=>response.json())
.then(values=>this.update(values))
this.setState({ place: value.place })
}
render(){
return(
<div className='background-style'>
<div className='box'>
<div className='search-box'>
<input type="text" placeholder="search"/>
<button type='submit' className='button text-small'>Search</button>
</div>
</div>
</div>
)}
}
CSS文件是:
.text{
font-family: 'PT Sans Narrow';
font-size: 50px;
font-weight: lighter;
color: crimson;
}
.text-small{
font-family: 'PT Sans Narrow';
font-size: 20px;
font-weight: lighter;
color: white;
}
.box{
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
width: 450px;
height: 700px;
background-image: url("./assets/images/wall.jpg");
}
.search-box{
position: absolute;
}
.button {
background-color: rebeccapurple;
border: none;
outline: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
}
.background-style{
background-image: url("./assets/images/sunny.jpg");
background-size: cover;
background-position: bottom;
}
- 如果我将
.box.position
属性更改relative
为 CSS 文件中的属性,则会呈现背景图像,但不会呈现搜索框。使该属性absolute
完全从渲染中删除背景图像,我不知道为什么会发生这种情况,非常感谢解决此问题的一些帮助。
解决方案
推荐阅读
- mysql - 在 Linux 服务器上完全通过命令行而不是通过 phpMyAdmin 使用 MySQL 时,如何查找和设置 localhost、用户和密码?
- javascript - 如何在不刷新浏览器或在 React 中使用 useEffect 的情况下检测服务器数据更改?
- django - 更改 HTTP 响应消息 Django
- reactjs - React Rendering 基于钩子的不同组件
- reactjs - 从 Firebase 存储中删除文件
- angular - 组件应该从存储中提取数据还是从父级接收数据?
- f# - Try..With Block 在第一个错误 F# 后挂起
- node.js - 使用 webpack 时出现 npm 安装错误,无法解析依赖项
- javascript - 如何在reactjs前端正确地将pdf字符串转换为pdf?(带有木偶的空白pdf)
- security - 会话 JWT 与会话 Cookie;误解?