时间戳

首页 > 解决方案 > 如何在横幅图像上应用白色叠加层

html - 如何在横幅图像上应用白色叠加层

问题描述

我正在做一个 React 项目。但这个问题与 React 无关。我遇到了很多解决方案，但没有一个对我有用。这是我的代码。

应用程序.js

...
import bannerimage from "./assets/images/bg-banner.jpeg";
function App() {
  const overlayOnBanner = {
    width: '100%',
    height: '100%',
    background: "rgba(229,229,229,0.3)",
    backgroundSize: 'cover'
  };

  const banner = {
    width: '100%',
    height: '800px',
    backgroundImage: `url(${bannerimage})`,
    backgroundSize: 'cover'
  };

  return (
    <div className="App">
      <div style={overlayOnBanner}>
        <div style={banner}>
        </div>
      </div>
    </div>       
  );
}

export default App;

请指出我的错误。

标签： htmlcss

解决方案

这就是我会做的事情注意我在造型和所有方面都没有太多关注

.overlay {
    position: absolute; 
    top:0;
    background: rgb(0, 0, 0);
    background: rgba(229,229,229,0.3); /* Black see-through */
    color: #f1f1f1; 
    width: 100%;
    transition: .5s ease;
    color: white;
    height: 300px;
  }
  .image{
   width: 100%;
   height: 300px;
  }
<img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="Avatar" class="image">
<div class="overlay"></div>

推荐阅读