홈>source

javascript : 이미지 위에 여러 색상이 있는 CSS 오버레이

여러 줄의 텍스트를 담을 수 있는 이미지의 상단 모서리에 DIV 블록을 배치하려고 합니다. 아래와 같이 이미지 모서리에 오버레이를 만들었습니다.

.sliderImgWrapper {
    position: relative;
    width: 200px;
    height: 300px;
    border: 2px solid #000000;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    border-top: 50px solid #FF0000;
    border-right: 50px solid transparent;
}
.overlayImage {
    position: absolute;
    top: -50px;
    left: -25px;
}

<div class="sliderImgWrapper">    <div class="overlay">    </div></div>

하지만 이미지의 투명도를 div의 한쪽에 있는 밝은 음영으로 만드는 방법을 잘 모르겠습니다. 이미지와 비슷하거나 자세히 보면

또한 다음과 같은 빨간색 영역 안에 텍스트를 담을 범위를 배치한 후

<div class="overlay">      <span style="color:blue;">title</span>    </div>

삼각형이 깨져보인다

javascripthtmlcss
  • 답변 # 1

    의사 요소를 사용하여 추가 마크업 없이 이 작업을 수행할 수 있습니다.

    .sliderImgWrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 2px solid #000000;
  background-image: url("https://i.stack.imgur.com/vNFzE.png");
  background-size: cover;
}
.sliderImgWrapper:before, .sliderImgWrapper:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  border-top: 50px solid #FF0000;
}
.sliderImgWrapper:before {
  border-right: 80px solid transparent;
  opacity: 0.5;
}
.sliderImgWrapper:after {
  border-right: 50px solid transparent;
}

    <div class="sliderImgWrapper">  <span>Some Inner Text</span></div>

  • 이전 javascript : 내 axios POST에서 알 수 없는 이유로 오류가 발생합니다.
  • 다음 RegEx를 사용하여 Java에서 문자열 모양 변경