是否可以在着陆图像的顶部使用线性渐变来做出反应？

Question

我想为着陆页图片添加渐变效果。

我在 CSS 中看到使用背景 (Example) 的示例，但我很好奇是否可以将其内联添加。

感谢任何批评，谢谢！

import React from 'react';
import city from '../images/city-buildings.jpg'

function Home() {
  return (
    <div className='home'>
      <img
        src={city}
        alt="city buildings looking up"
        width="100%"
        height="100%"
        backgroundImage="linear-gradient(to right, #4880EC, #019CAD)".  <------------- this line
      />
    </div>
  );
}

export default Home;

Answer 1

要在图像上应用线性渐变，此代码对我有用：

组件

import React, { Component } from 'react';
import city from '../images/city-buildings.jpg'

const style = {
  width: '100%',
  height: '100%',
  opacity: '0.8'
}

export default class MyComponent extends Component {
  render() {
    return (
      <div className="home">
        <img
          src={city}
          style={style}
          alt="city buildings looking up"
        />
      </div>
    )
  }
}

Component.css

.home {
  background: linear-gradient(#e66465, #9198e5);
}

是否可以在着陆图像的顶部使用线性渐变来做出反应？

Is it possible to use linear-gradient on top of a landing image in react?

css

inline

reactjs