在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;
虽然“徽标”以蓝色背景完美显示,但不透明的覆盖层不会出现。
任何帮助将不胜感激。
谢谢
答案 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>