>

이미지가 배경 URL로 설정된 것처럼 작동하고 다음과 같이 작동하기를 원합니다.

img.thisIsMyImage {
 background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
animation: increase 60s linear 10ms infinite;
-webkit-transition: all 5.2s ease-in-out;
-moz-transition: all 5.2s ease-in-out;
-ms-transition: all 5.2s ease-in-out;
-o-transition: all 5.2s ease-in-out;
transition: all 5.2s ease-in-out;

}

이것은 반응 코드입니다

render() {
    return (
    <div>
        <img src={rsm_logo} className="thisIsMyImage" alt="containerLogo" />
        <LoginForm submit={this.submit} />
    </div>
    )
}

이것은 CSS에서 위의 코드와 같이 수행하면 완벽하게 작동하지만 "thisIsMyImage"요소의 .jsx 코드에있는 요소에 적용되기를 원합니다. CSS 코드와 동일한 동작입니다.

모든 제안은 대단히 감사합니다. 감사합니다.

  • 답변 # 1

    다음과 같이 반응 파일로 CSS 파일을 가져와야합니다 :

    // remove "img" from class in css
     img.thisIsMyImage {
         background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
      }
     // like this:
     .thisIsMyImage {
       background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
     }
    
    

    React 구성 요소에서 CSS 파일을 가져옵니다.

    import from './styles.css'
    <img src={rsm_logo} className="thisIsMyImage" alt="containerLogo" />
    
    

  • 답변 # 2

    img 태그에서 src와 background를 함께 사용하는 이유는 무엇입니까? 여기에 img 태그를 사용하는 것이 이상합니다. Img src가 우선합니다. 이미지가 표시되도록 적절한 너비와 높이를 제공해야 할 수도 있습니다.

    div와 img 태그가있는 예제를 첨부했습니다.

    .thisIsMyImage {
        background: url("https://via.placeholder.com/150") no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
        animation: increase 60s linear 10ms infinite;
        -webkit-transition: all 5.2s ease-in-out;
        -moz-transition: all 5.2s ease-in-out;
        -ms-transition: all 5.2s ease-in-out;
        -o-transition: all 5.2s ease-in-out;
        transition: all 5.2s ease-in-out;
        width:150px;
        height:150px;
    }
    
    
    <div class="thisIsMyImage" title="containerImage"></div>
    <img src="https://via.placeholder.com/150" class="thisIsMyImage" title="containerImage" />
    
    

    다수의 가져 오기를 피하기 위해 기본 파일에서 CSS를 가져옵니다.

    import from './styles.css'
    
    

    렌더 기능에서 background&background-related-properties를 사용하려는 경우 img 태그 대신 div를 사용하는 것이 좋습니다.

    render() {
      return (
        <div>
          <div className="thisIsMyImage" title="containerLogo" />
          <LoginForm submit={this.submit} />
        </div>
      )
    }
    
    

  • 답변 # 3

    CSS를 가져오고 클래스를 설정할 수 있습니다

    class Hello extends React.Component {
      render() {
        return (
        	<div>
          	Hello {this.props.name}
            
            <div className='imgStyle' />
          </div>
    		);
      }
    }
    ReactDOM.render(
      <Hello name="World" />,
      document.getElementById('container')
    );
    
    
    .imgStyle {
      background: url("https://placekitten.com/600/200") no-repeat center center fixed; 
      
      width: 600px;
      height: 300px;
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    <div id="container">
    </div>
    
    

  • 이전 android - 사용자에게 ArrayList 표시
  • 다음 python - 팬더는 어떻게 같은 그래프에 2 pdf를 그릴 수 있습니까?