我有 html 文本,用 css 颜色为白色。我还将不透明度设置为 0.5,但这不会改变字体颜色。它应该保持白色。
有没有解决这个问题而不删除不透明度或背景颜色?
body {
background: green;
}
.second-b {
background-image: url(images/town.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.color-box {
width: 100%;
height: 300px;
background-color: red;
opacity: 0.5;
line-height: 300px;
text-align: center;
}
.color-box-content {
display: inline-block;
vertical-align: middle;
line-height: normal;
color: white;
font-size: 22px;
}Run Code Online (Sandbox Code Playgroud)
<div class="second-b">
<div class="color-box">
<div class="color-box-content">Lorem ipsum</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
我有 2 个 div 类,分别称为 box1 和 box2。
当我将屏幕尺寸更改为 600px 或更小时,box1 和 box2 都获得宽度:100%,并且 box1 保持在顶部,box2 保持在底部。有什么方法可以更改这些框的位置,以便 box2 保持在顶部,box1 保持在底部,而不改变 html 中的元素位置?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is the title</title>
<style type="text/css">
.box1{
width:100px;
height:100px;
background:red;
float:left;
}
.box2{
width:100px;
height:100px;
background:blue;
float:right;
}
.wrapper{
max-width:500px;
}
@media screen and (max-width:600px){ /* for tablets */
.box1{
width:100%;
float:right;
}
.box2{
width:100%;
float:right;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
<script>
</script> …Run Code Online (Sandbox Code Playgroud) 我试图通过单击按钮将 html body 的背景颜色更改为红色,但我只知道如何使用已经在 body 内部的元素,而不是 body 本身。
class App extends Component {
constructor(props) {
super(props);
this.state = {
bgColor: ""
};
}
boxClick = e => {
this.setState({
bgColor: "red"
});
};
render() {
return (
<div className="App">
<article className="experimentsHolder">
<div
className="boxClickCss"
style={{ backgroundColor: this.state.bgColor }}
onClick={this.boxClick}
>
Click Me!
</div>
</article>
</div>
);
}
}
Run Code Online (Sandbox Code Playgroud)
如您所见,我添加style={{backgroundColor: this.state.bgColor}}到 div,但我无法将其添加到 body 中,因为它不在此文件中。有什么帮助吗?
我有反应的状态,其中包括称为增量的对象。在该对象内部,我有一个名为count的属性,其值为0。有人知道如何通过单击按钮来增加count的值吗?
import React, { Component } from 'react';
class App extends Component {
constructor(){
super();
this.state = {
increment:{
count:0
}
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState(prevState => {
return {
increment.count: prevState.increment.count + 1
}
})
}
render() {
return (
<div>
<h1>{this.state.increment.count}</h1>
<button onClick={this.handleClick}>Change!</button>
</div>
)
}
}
export default App;
Run Code Online (Sandbox Code Playgroud)
React给我一个错误,称为解析错误:意外的令牌,预期为“,”