小编Ple*_*air的帖子

HTML 文本不显示为白色

我有 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)

html css

3
推荐指数
1
解决办法
1093
查看次数

如何使用媒体查询更改 html 容器位置

我有 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 css media-queries

3
推荐指数
1
解决办法
9340
查看次数

使用 React 在单击时更改 body 元素的背景颜色?

我试图通过单击按钮将 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 中,因为它不在此文件中。有什么帮助吗?

javascript reactjs

1
推荐指数
1
解决办法
5422
查看次数

如何更新有对象的反应状态?

我有反应的状态,其中包括称为增量的对象。在该对象内部,我有一个名为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给我一个错误,称为解析错误:意外的令牌,预期为“,”

reactjs

-2
推荐指数
1
解决办法
45
查看次数

标签 统计

css ×2

html ×2

reactjs ×2

javascript ×1

media-queries ×1