알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)-CSS 튜토리얼-php.cn

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)

青灯夜游

풀어 주다： 2021-06-26 20:42:24

앞으로

3317명이 탐색했습니다.

이 기사에서는 CSS를 사용하여 이미지의 테마 색상을 얻는 약간의 요령을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)

Background

이유는 WeChat 기술팀의 한 친구가 "사진의 메인 컬러를 얻을 수 있는 방법이 없나요? "라고 물었기 때문입니다. 사진이 있고 기본 색상을 가져옵니다.

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)

얻은 색상 값을 사용하여 다음과 같은 기능을 구현합니다. 컨테이너에 사진이 있고 배경색이 사진의 기본 색상에 적응할 수 있기를 바랍니다. , 다음과 같습니다:

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)

모두가 제안을 하고, 일부는 계산에 Canvas를 사용하는 것에 대해 이야기하고, 일부는 특별한 오픈 소스 라이브러리를 추천합니다. 모두 매우 좋습니다.

그렇다면 CSS를 사용하여 이 기능을 구현할 수 있나요?

좀 꿈처럼 들립니다. CSS가 여전히 이 효과를 얻을 수 있을까요? 음, CSS를 사용하면 실제로 이미지의 기본 색상을 영리하게 근사할 수 있습니다. 기본 색상에 대한 요구 사항이 특별히 정확하지 않은 경우, 이것이 함께 알아보겠습니다.

필터: Blur() 및 변환: sacle()을 사용하여 이미지의 테마 색상을 얻습니다.

여기에서는 블러 필터와 확대 효과를 사용하여 이미지의 테마 색상을 대략적으로 얻습니다.

다음과 같은 사진이 있다고 가정합니다:

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)

<div></div>

로그인 후 복사

흐림 필터를 사용하여 사진에 적용:

div {
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)?resize=1024%2C683&ssl=1");
    background-size: cover;
    filter: blur(50px);
}

로그인 후 복사

효과를 보려면 더 큰 흐림 필터를 사용하여 사진을 흐리게 합니다. blur(50px ) , 흐릿한 사진이 약간 그런 것처럼 보이지만 가장자리가 약간 흐릿한 경우가 있으니 overflow를 사용하여 잘라보세요. blur(50px)，模糊之后的图片有点那感觉了，不过存在一些模糊边缘，尝试利用 overflow 进行裁剪。

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)

接下来，我们需要去掉模糊的边边，以及通过 transform: scale() 放大效果，将颜色再聚焦下，稍微改造下代码：

div {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)?resize=1024%2C683&ssl=1");
    background-size: cover;
    // 核心代码：
    filter: blur(50px);
    transform: scale(3);
}

로그인 후 복사

结果如下：

알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)