是否可以在着陆图像上使用线性渐变进行反应？答案

【问题标题】：Is it possible to use linear-gradient on top of a landing image in react?是否可以在着陆图像上使用线性渐变进行反应？
【发布时间】：2020-11-25 00:44:48
【问题描述】：

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

我在 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;

【问题讨论】：

将样式应用到父 div -> style={{ background: 'linear-gradient(to right, #430089, #82ffa1)'}

标签： css reactjs inline

【解决方案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>
    )
  }
}

组件.css

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

【讨论】：