Question

我有一个div，它有一个相当长的样式列表，看起来很荒谬，但是，div会在更新状态时使用背景图像url的参数。

样式内联，我的元素看起来像这样：

      <div style={{width: 55,
                  height: 55,
                  position: 'fixed',
                  borderRadius: '50%',
                  bottom: 130,
                  zIndex: 200,
                  backgroundImage: `url(${this.state.avatar})`}}>

然而，当我这样做时，我的背景图像完全消失了：

<div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>

这里有什么问题？

Answer 1

我使用create-react-app创建了一个示例项目并使用了以下代码，它对我有用：

App.js：

import React, {Component} from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {avatar: 'https://www.gstatic.com/webp/gallery3/1.png'}
  }

  render() {
    return (
      <div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>
        something here...
      </div>
    );
  }
}

export default App;

App.css：

.avatar {
  width: 500px;
  height: 500px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
}

Answer 2

@ salman.zare的答案对我发布的问题100％正确，但是，我发现问题与组合className和内联样式没有任何关系。问题是我的div容器对于图像来说太小了，50px。以下是我添加的内容：background-size: contain;

所以：

.avatar {
  width: 50px;
  height: 50px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: contain;
}

如果使用no-repeat，这也有效并且不会切断图像的底部：background-size：100％100％;

.avatar {
  width: 55px;
  height: 55px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

如何将内联样式和className应用于同一元素

2 个答案: