[CSS] 이미지 딤드 처리하기 (dimmed image) / 이미지 액자 효과 기법 / opacity와 background: rgba

HTML 코드

img 태그를 감싸는 img_box 태그를,

형제 태그로 텍스트 태그를 작성한다

 

<a href="#" class="link">
  <div class="img_box">
    <img src="./image/snupi.jpg" alt="스누피">
  </div>
  <div class="info">
    <span class="category">스누피</span>
    <p class="title">snupi.tistory.com.snupi.tistory.com</p>
  </div>
</a>

 

 

---

액자 효과 기법 CSS 코드

1. 이미지 액자 효과를 위해 img와 동일한 사이즈로 width와 height를 설정한다

 

2. 그리고 반투명한 컬러 적용을 위해 rgba 속성을 사용하고

 

3. 그 위에 글자를 배치시킨다

 

+. 그리고 img 위로 border가 나와야 하므로 absolute를 사용을 통해 이를 해결한다

 

여기서, 보더를 가지는 html 태그를 추가해서 만들 수 있으나

시멘틱 마크업을 위해 :before, :after 같은 가상 선택자를 사용하여 구조를 추가하는 것이 좋다

즉, 불필요한 태그 사용을 자제한다

 

---

 

주요 CSS 코드는 다음과 같다

 

.img_box, .img_box img {
    width: 200px;
    height: 180px;
}
.img_box {
    /* :after의 부모 */
    position: relative;
}
/* 배경 이미지 dimmed 처리 */
.img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 빈 값으로 넣어야 가상의 요소 생성; */
    content: '';
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
/* 글자 이미지 위에 나타나도록 */
.info {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: #000;
}

 

::after 가상 선택자를 이용하여 background-color를 rgba(0, 0, 0, 0.2)로 지정한다

여기서 이미지에 opacity 속성을 쓰면 안 되는 것일까?

각각의 특성은 다음과 같다

 

rgba(): 자식 요소는 불투명하게 유지
opacity: 요소의 내용을 포함해 범위 내 모든 곳에 영향을 준다 -> 요소를 새로운 쌓임 맥락에 배치한다

 

고 나와있다

 

즉, opacity를 사용하게 되면 모든 범위에 영향이 미친다

 

 

---

 

다음은 전체 CSS 코드이다

 

.link {
    /* .info의 부모 */
    position: relative;
    /* a 태그의 블록처리 : 자식으로 블록 요소가 있다면,
       최대 영역이 링크 요소라는 걸 인지하도록 */
    display: inline-block;
}
.img_box, .img_box img {
    width: 200px;
    height: 180px;
}
.img_box {
    /* :after의 부모 */
    position: relative;
}
/* 배경 이미지 dimmed 처리 */
.img_box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 빈 값으로 넣어야 가상의 요소 생성; */
    content: '';
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
/* 글자 이미지 위에 나타나도록 */
.info {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    color: #000;
}
.category {
    font-size: 14px;
}
.title {
    margin-top: 3px;
    font-size: 18px;
    line-height: 22px;
    /* 말줄임 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

결과 이미지

 

---

 

• filter: blur(50px);