Я работаю над проектом React. Но этот вопрос не имеет отношения к React. Я столкнулся со многими решениями, но ни одно из них мне не подходит. Вот мой код.

App.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;

Укажите, пожалуйста, на мою ошибку.

0
Tanzeel 17 Сен 2021 в 22:40

3 ответа

Лучший ответ

Если вы поместите баннер (div с backgroundImage) снаружи и оберните его вокруг наложения баннера, его будет довольно легко отформатировать так, как вы хотите. Поскольку баннер не имеет никакого содержания, кроме внутреннего div, и поскольку мы используем 100% ширины и высоты этого внутреннего div, "оверлей" будет покрывать все изображение.

Это то, что ты искал?

class App extends React.Component {

  render() {
  
    let banner = {
      width: '100%',
      height: '150px',
      backgroundImage: `url(https://source.unsplash.com/daily)`,
      backgroundSize: 'cover',
    };
    let overlayOnBanner = {
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(255,255,255,0.6)',
      fontSize: 1.5 + 'rem',
      fontWeight: 'bold',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }

    return ( <
      div className = 'App'>
        <div style = {banner}>
          <div style = {overlayOnBanner}>
            This is the overlay, inside of the banner. 
           </div> 
        </div> 
      </div>
    );
  }
}

ReactDOM.render( <
  App / > ,
  document.body
);
<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>
1
Keller DeBord 17 Сен 2021 в 21:35

Вот как бы я это сделал. N.B. я не уделял особого внимания стилю и всему прочему.

.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>
1
Phiilp A Khoza 17 Сен 2021 в 20:15

Исправляем код

Проблема с вашим кодом заключается в том, что наложение размещается за изображением. Чтобы решить эту проблему, просто переключите оверлей и изображение в HTML (или JSX в вашем случае).

Более чистый подход

Элемент может иметь как фоновое изображение, так и цвет фона. Лучшее решение - удалить элемент наложения и добавить это свойство вместо этого в свой баннер.

background: url(${bannerimage}, rgba(229,229,229,0.3);

0
Kristian Nilsson 17 Сен 2021 в 22:13