Question

我希望图像的行为就像设置为背景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;

}

这是React代码

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

当完成上述CSS中的代码时，这工作得很好，但我希望将其应用于元素“ thisIsMyImage ”上的.jsx代码中的元素，并且stil有与css代码中的行为相同。

非常感谢您提出任何建议。

Answer 1

BackgroundImage.js

import './YourFileName.css'
import Image from '../path/path/path/image.jpeg'

export const BackgroundImage = () => {
    return (
      <>
        <img className="backgroundImage" src={Image} alt={"Error"} />
      </>
    )
}

YourFileName.css

.backgroundImage {
    width: 100%;
    height: 100vh;
}

Answer 2

您需要将css文件导入到react组件中，如下所示：

 // 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" />

Answer 3

为什么在img标签中同时使用src和background？在这里使用img标签很奇怪。 Img src将优先。您可能需要提供合适的宽度和高度才能显示图像。

我附带了一个带有div和img标签的示例。

' Instead of
' Set ZipFile = sh.Namespace(CVar(x & "\" & FileInFolder.Name)) 
' write
Dim fName as string
fName = x & "\" & FileInFolder.Name; ' Now you can check fName and see the problem.
Set ZipFile = sh.Namespace(CVar(fName))

.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;
}

将css导入主文件中，以避免多次导入。

<div class="thisIsMyImage" title="containerImage"></div>

<img src="https://via.placeholder.com/150" class="thisIsMyImage" title="containerImage" />

在渲染功能中，如果要使用background＆background-related-properties，我建议使用div代替img标签。

import from './styles.css'

Answer 4

您可以导入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>

在React中设置背景图片

4 个答案: