css hero section overlay 방법

 

How To Create a Hero Image (w3schools.com)

How To Create a Hero Image

 

 

------

 

아래와 같이 사용해보았다~

.hero-section .hero-bg {
  height: 60vh;
  border: 1px solid;
  border-top: none;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./flower.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-section .hero-bg .hero-text {
  text-align: center;
}

.hero-section .hero-bg .hero-text h1{
  font-size: 2rem;
}

 

 

아래와 같은 방법도 있으니 참고해보자

/* https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image */
.test {
  background-image: url("./assets/mobile/image-host.jpg");
  background-blend-mode: overlay;
}