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

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

Background

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

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

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

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

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

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

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

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

<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 进行裁剪。

接下来，我们需要去掉模糊的边边，以及通过 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，拿到了图片的主色调，并且效果还是不错的！

完整的代码你可以戳这里：CodePen Demo -- Get  the main color of the image by filter and scale

不足之处

当然，该方案也是存在一定的小问题的：

1. 只能是大致拿到图片的主色调，无法非常精确，并且 filter: blur(50px) 这个 50px

2. 연결 다음으로 흐린 가장자리를 제거하고 transform: scale()을 사용하여 효과를 확대하고 색상에 다시 초점을 맞춘 다음 코드를 약간 수정해야 합니다.

rrreee

결과는 다음과 같습니다.

여기서 그런데 CSS를 사용해서 사진의 메인 컬러를 얻었는데 효과가 꽤 좋아요!

전체 코드를 보려면 여기를 클릭하세요. CodePen 데모 -- 기본 색상 가져오기

단점

물론 이 솔루션에는 몇 가지 사소한 문제도 있습니다.

이미지의 기본 색상을 대략적으로만 얻을 수 있고 매우 정확할 수 없으며 필터: 흐림(50px) 이 50px에는 약간의 디버깅이 필요합니다🎜🎜흐림 필터 자체는 상대적으로 성능을 많이 소모합니다. 페이지에서 이 방법으로 얻은 배경이 여러 개인 경우 성능에 어떤 영향을 미치며 실제 사용 시 절충이 필요합니다🎜🎜🎜마지막으로🎜🎜이 기사는 여기서 끝나서 이미지의 테마 색상을 얻기 위해 CSS를 사용하는 방법을 소개하겠습니다. 도움이 될 것입니다:)🎜🎜🎜원본 주소: https://segmentfault.com/a/1190000039979112🎜🎜저자: chokcoco🎜🎜🎜프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 알아야 할 이미지의 테마 색상을 얻는 CSS 팁(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!