한 달 전에는::after 및::before 의사 요소에 대해 몰랐기 때문에 특정 div 앞에 무엇이든 포함하려면 추가 div를 만들곤 했습니다. 예를 들어 테두리를 사용하지 않고 div에 밑줄을 긋거나 어두운 배경의 밝은 이미지를 오버레이하여 밝은 이미지에서 내 밝은 텍스트가 명확하게 보이도록 하려면 일반적으로 콘텐츠가 포함되지 않은 다른 div를 만들어 그렇게 합니다. , 일부 배경색 및 기타 스타일. 그래서 내 코드가 못생겼습니다. 많은 이미지에 해당 오버레이를 갖고 싶다면 저를 믿으세요. 스타일을 위해서만 html에 불필요한 마크업을 포함하기 때문에 코드가 정말 형편없어 보일 것입니다.

그래서 여가 시간에 제가 하는 일은 멋진 애니메이션이 있는 좋은 웹사이트를 찾아 여전히 단순하고 꽤 깨끗한 것을 찾아서 복사하는 것입니다. 먼저 나 자신을 시도한 다음 개발 도구에서 CSS를 찾습니다. css와 html에서 몇 가지 추가 기술을 배우는 것은 정말 좋은 습관입니다. 훌륭한 CSS 속성을 많이 배웁니다. 내가 최근에 웹사이트https://realestate01.vercel.app에서 웹사이트https://adigedesign.com를 복사하여 만든 것처럼 지식이 늘어납니다. 그런 다음 Google에서 검색한 웹사이트font-smoothing: antialiased;가 사용된 것을 확인했습니다. 텍스트를 만들고 웹 페이지에서 선명하게 만들지만 이제는 웹 표준이 아니며 mdn은 프로덕션에서 전혀 사용하지 않는 것이 좋습니다. 자유 시간에 웹 사이트 사본을 만들려고 노력하면서 배울 수 있는 것입니다.

이 웹사이트에서는 일부 이미지에서::after를 사용하여 텍스트가 이미지 위에 명확하게 표시되도록 했습니다. 이미지와 해당 이미지 위에 텍스트가 포함된 div가 있다고 가정해 보겠습니다. 다음과 같이 보일 것입니다



그러나 div에서::after를 사용하여 약간 어두운 배경을 만들면 다음과 같이 표시됩니다.



두 번째 이미지의 약간 어두운 배경을 보셨나요? 그리고 나는 HTML을 만지지도 않았고 순수한 CSS 일뿐입니다.

코드를 보고 싶습니까?

div {
    position: relative;
}
div::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-image: linear- 
    gradient(transparent, rgba(0,0,0,0.6));
}

설명하겠습니다. 이미지가 포함된 div는 위 CSS 코드의 div입니다. 이 div의 자식이 의사 자식이라도 이 div에 따라 배치되도록 상대 위치가 필요합니다.
content는 div 뒤에 텍스트를 추가하고 싶지 않기 때문에 빈 문자열입니다. 어쨌든 html에서 빈 div를 사용하는 것보다 훨씬 낫고 효율적입니다. 동의??::after는 겹치기를 원하기 때문에 절대 위치가 지정됩니다. 높이는 완전히 겹치지 않기 때문에 40%입니다. 높이 40%는 바닥에서 시작해야 하므로 바닥이 0입니다. 배경 이미지는 무엇이든 사용할 수 있지만 저는 선형 그래디언트를 사용하고 있습니다.

이제::after 및::before의 힘이 명확해지기를 바랍니다.