在React中向图像添加不透明覆盖

时间:2019-08-03 15:58:10

标签: javascript css reactjs

在React功能组件中,我尝试添加图像,然后在顶部添加不透明的叠加层。

我已经在css和react.js文件中尝试了以下代码部分:

在css文件中:

.Image {
    background-color: #2F5596;
}

.Overlay {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 100%;
    background-color: 'rgba(0, 0, 0, 0.5)';
  }

在js文件中:

import logo from '../../assets/images/WhiteLettering_BlueBackground/WhiteLettering_BlueBackground_256.png';
import classes from './Layout.css';

const layout = (props) => {
    return (

        <div className={classes.Image}>
            <img src={logo} className={classes.Overlay} />
        </div>

    )
}

export default layout;

虽然“徽标”以蓝色背景完美显示,但不透明的覆盖层不会出现。

任何帮助将不胜感激。

谢谢

1 个答案:

答案 0 :(得分:1)

使用绝对定位的伪元素(::before),该伪元素将出现在图像顶部:

const logo = 'https://picsum.photos/1200/1200';

const Layout = (props) => (
  <div className="container">
      <img src={logo} className="image" />
  </div>
)

ReactDOM.render(
  <Layout />,
  root
)
.container {
  position: relative;
  background: #2F5596;
}

.container::before {
  position: absolute;
  display: block;
  transform: translateX(-50%);
  left: 50%;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  content: '';
}

.image {
  object-fit: cover;
}
<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="root"></div>