Question

.w { 
  background-image: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg'); 
}

<button class="w drum">w</button>

我一直在尝试使用Atom编辑器为我的网站创建背景图片，但该图片无法正常工作，但我们应该在HTML文件中内联使用它，它将可以正常使用，我不会在HTML文件。我想使文件彼此分开。请我帮忙

Answer 1

这可以解决您的问题！ background-size: contain/cover

包含将缩放图像并将其适合按钮内。盖子将覆盖整个按钮。或者，您可以尝试background-size: 100% 100%;

.w { 
  background: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg') no-repeat; 
  background-size: cover;
  width: 70px;
  height: 50px;
}

<button class="w drum">w</button>

Answer 2

您必须手动重新加载CSS文件，或删除缓存的数据。

如果您使用PHP编程，

这样做：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import '../styles/cal-event-styles.css';

class CalEvent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDragging: false,
      height: 40,
      text: this.props.text,
      color: this.props.color
    }
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('mousemove', this.resizePanel);
    ReactDOM.findDOMNode(this).addEventListener('mouseup', this.stopResize);
    ReactDOM.findDOMNode(this).addEventListener('mouseleave', this.stopResize);
  }

  resizePanel = (event) => {
    if (this.state.isDragging) {
//I tried to use event.clientY - this.state.initialPos but it doesn't work
      let delta = event.clientY + this.state.height;
      console.log("event.clentY " + event.clientY);
      console.log("this.state.initialPos " + this.state.initialPos);
      this.setState({height: delta});
    }
  }

  stopResize = () => {
    if (this.state.isDragging) {
      this.setState({
        isDragging: false,
      });
    }
    // height: this.getStep(this.state.height)
  }

  getStep = (height) => {
    return Math.floor(height / 50) * 50;
  }

  startResize = (event) => {
    this.setState({
      isDragging: true,
      initialPos: event.clientX
    });
  }

  formatText = () => {
    const { text, height } = this.state;
    return text.length > 10 && height <= 100 ? text.substring(0, 14) + "..." : text;
  }

  render(){
    const {color, text, height, isDragging, initialPos } = this.state;

    console.log("this.state.isDragging: " + isDragging);
    if (isDragging) {

      console.log("this.state.height: " + height);
      console.log("this.state.initialPos: " + initialPos);
    }
    return(
      <div className="cal-event" onMouseUp={() => this.stopResize()} style={{height: `${height}px`, background: color}}>
        <div className="cal-event-tile"><p>{this.formatText()}</p></div>
        <div className="resizer-height" onMouseDown={e => this.startResize(e)}></div>
      </div>
    )
  }
}

export default CalEvent;

Answer 3

检查图像文件夹的位置，如果要在单独的CSS文件中插入（下载的）图像，则图像文件夹应位于CSS文件夹中。

.w { 
  background-image: url('images/pic.png')
}

不显示背景网址

3 个答案: