Programing

CSS (자바 스크립트)에 따라 색상을 밝거나 어둡게 동적으로 변경

lottogame 2020. 3. 30. 08:41
반응형

CSS (자바 스크립트)에 따라 색상을 밝거나 어둡게 동적으로 변경

우리는 사이트에 큰 응용 프로그램이 있으며 몇 가지 링크가 있습니다.이 사이트의 파란색 링크와 같은 파란색을 가정 해 봅시다. 이제 다른 링크를 만들고 싶지만 더 밝은 색상입니다. 분명히 CSS 파일에 16 진수 코드를 추가하여 간단하게 수행 할 수 있지만 사이트에서 사용자 정의 프로파일 / 사이트 (예 : Twitter)에 대해 원하는 색상을 결정할 수 있습니다.

내 질문은 : 색상을 백분율로 줄일 수 있습니까?

다음 코드가 CSS라고 가정 해 봅시다.

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

또는

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then reducing it
}

색상을 백분율로 줄이는 방법이 있습니까?

SASS 를 사용할 수있는 스택을 사용하는 경우 다음 기능을 사용할 수 있습니다 lighten.

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

이제 CSS 필터를 사용하여이 작업을 수행 할 수 있습니다. 지원은 iffy 크로스 브라우저이지만 사양이 계속 구현되고 정리됨에 따라 매우 유용합니다.

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}
<button class="button">Foo lorem ipsum</button>

사용할 수있는 다양한 필터에 대한 정보는 다음과 같습니다. http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters--net-23318

최신 정보

필터가 주류로 진입함에 따라 점점 더 많은지지를 얻는 것으로 보입니다. 현재 호환성은 다음과 같습니다. http://caniuse.com/#feat=css-filters

배경을 비추는 "불투명도"가 있습니다.

opacity: 0.5;

하지만 이것이 당신이 무슨 뜻인지 잘 모르겠습니다. "색상 줄이기"정의 : 투명하게 만드시겠습니까? 아니면 흰색을 추가 하시겠습니까?

HSL 색상은 대답을 제공하며 HSL 색상 값은 hsl (hue [0,255], 채도 %, 명도 %)로 지정됩니다.

HSL은 IE9 +, Firefox, Chrome, Safari 및 Opera 10+에서 지원됩니다.

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

LESS에서는 다음 변수를 사용합니다.

@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);

이것은 첫 번째 변수를 가져 와서 20 % (또는 다른 백분율)만큼 밝게 만듭니다. 이 예에서는 더 밝은 색상으로 끝납니다.#ccc

더 어두운 색상을 원하면 rgba불투명도가 낮은 검은 색을 사용할 수 있습니다 .

rgba(0,0,0,0.3)

더 밝은 흰색을 사용하는 경우 :

rgba(255,255,255,0.3).

내가 아는 한 CSS 에서이 작업을 수행 할 수있는 방법이 없습니다.

그러나 작은 서버 측 논리는 제안한대로 쉽게 할 수 있다고 생각합니다. CSS 스타일 시트는 일반적으로 정적 자산이지만 서버 측 코드로 동적으로 생성 할 수있는 이유는 없습니다. 서버 측 스크립트는 다음과 같습니다.

  1. URL 매개 변수를 확인하여 사용자 및 사용자가 선택한 색상을 판별하십시오. CSS를 캐시 할 수 있도록 세션 변수 대신 URL 매개 변수를 사용하십시오.
  2. 색상을 빨강, 녹색 및 파랑 구성 요소로 나눕니다.
  3. 세 성분 각각을 정해진 양만큼 증가시킵니다. 이것으로 실험하여 결과를 얻으십시오.
  4. 새로운 색상을 통합 한 CSS 생성

이 CSS 생성 페이지에 대한 링크는 다음과 같습니다.

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

.css 확장명을 사용하지 않는 경우 브라우저가 파일을 CSS로 해석하도록 알 수 있도록 MIME 유형을 올바르게 설정하십시오.

(색상을 밝게하려면 각 RGB 값 을 높여야 합니다)

sass 기반 CSS 프레임 워크 인 http://compass-style.org/ 를 사용하기로 결정한 경우 CSS 를 동적으로 생성 하는 매우 유용 darken()하고 lighten()sass 기능을 제공합니다 . 매우 깨끗합니다.

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

생성

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

글을 쓰는 시점에서 내가 찾은 색상 조작을위한 최고의 순수 CSS 구현은 다음과 같습니다.

CSS 변수를 사용하여 HEX / RGB 형식 대신 HSL로 색상을 정의한 다음이를 사용하여 색상을 조정하십시오 calc().

기본 예는 다음과 같습니다.

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 10);
}
<h3>Color Manipulation (alpha)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-10)"></div>
  <div style="background-color: var(--link-color-20)"></div>
  <div style="background-color: var(--link-color-30)"></div>
  <div style="background-color: var(--link-color-40)"></div>
  <div style="background-color: var(--link-color-50)"></div>
  <div style="background-color: var(--link-color-60)"></div>
  <div style="background-color: var(--link-color-70)"></div>
  <div style="background-color: var(--link-color-80)"></div>
  <div style="background-color: var(--link-color-90)"></div>
  <div style="background-color: var(--link-color)"></div>
</div>

<h3>Color Manipulation (Hue)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-warm)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-cold)"></div>
</div>

<h3>Color Manipulation (Saturation)</h3>

<div class="flex">
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-low)"></div>
  <div style="background-color: var(--link-color-lowest)"></div>
</div>

<h3>Color Manipulation (Lightness)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-light)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-dark)"></div>
</div>

또한 루트 프레임 변수라는 기본 CSS 변수 지원을 제공하기 위해 CSS 프레임 워크 (아직 초기 단계)를 만들었습니다 .

rgb ()를 사용하여 약간의 자바 스크립트를 사용하여 어둡고 밝은 색을 계산할 수 있습니다.

바이올린 : 정말 좋지는 않지만 단지 설명을위한 것입니다.

그것이 본질적으로하는 것은 색상을 설정하고 10만큼 떨어져있는 rgb와 동일한 양 (서로 비교)으로 20 개의 색상을 선택하는 것입니다.

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};

이것은 오래된 질문이지만 대부분의 대답은 작동하기 위해 전 처리기 또는 JavaScript를 사용해야하거나 요소의 색상뿐만 아니라 그 안에 포함 된 요소의 색상에도 영향을 미칩니다. 나는 똑같은 일을하는 복잡한 CSS 전용 방법을 추가 할 것입니다. 아마도 앞으로 고급 CSS 기능을 사용하면 더 쉬울 것입니다.

아이디어는 다음을 사용하여 이루어집니다.

  • RGB 색상이므로 빨강, 녹색 및 파랑에 대한 별도의 값이 있습니다.
  • 색상 값과 어두움을 저장하는 CSS 변수; 과
  • calc기능은 변경 사항을 적용합니다.

기본적으로 농도는 1 (100 %의 경우 일반 색상)이며 0과 1 사이의 숫자를 곱하면 색상이 더 어두워집니다. 예를 들어 각 값에 0.85를 곱하면 색상이 15 % 어두워집니다 (100 %-15 % = 85 % = 0.85).

여기서 일례이며, I는 세 개의 클래스 생성 : .dark, .darker및 .darkest그 원래의 색을 25 %, 50 % 및 75 %를 각각 어둡게 할 것이다 :

html {
  --clarity: 1;
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 20px;
  background: rgba(
                  calc(var(--r) * var(--clarity)), 
                  calc(var(--g) * var(--clarity)), 
                  calc(var(--b) * var(--clarity))
                );
}

.dark    { --clarity: 0.75; }
.darker  { --clarity: 0.50; }
.darkest { --clarity: 0.25; }

.red {
  --r: 255;
  --g: 0;
  --b: 0;
}

.purple {
  --r: 205;
  --g: 30;
  --b: 205;
}
<div class="red">0%</div>
<div class="red dark">25%</div>
<div class="red darker">50%</div>
<div class="red darkest">75%</div>

<br/><br/>

<div class="purple">0%</div>
<div class="purple dark">25%</div>
<div class="purple darker">50%</div>
<div class="purple darkest">75%</div>

간단한 대답 중 하나는 색상 위에 50 % 투명 흰색 PNG를 사용하는 것입니다.

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

여기서 lighten.png는 투명도가 50 % 인 흰색으로 채워진 PNG입니다.

직접적으로는 아닙니다. 그러나 colorschemedesigner.com 과 같은 사이트를 사용하면 기본 색상을 제공하고 기본 색상의 다양한 범위에 대한 16 진수 및 RGB 코드를 제공 할 수 있습니다.

사이트의 색 구성표를 찾은 후에는 색상에 대한 16 진수 코드를 넣고 스타일 시트 상단의 주석 섹션에 이름을 지정합니다.

다른 색 구성표 생성기는 다음과 같습니다.

RGBa ( 'a'는 알파 투명도)를 사용할 수 있지만 아직 널리 지원되지는 않습니다. 그것은 것입니다 당신이 지금 사용하고 대체를 추가 할 수 있도록하지만, 수 :

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }

시험:

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}

DIV와 CSS로 완전히 수행 된 테이블 솔루션을 모두 결합하여 사용해보십시오.) 브라우저는 RGBA 색상을 지원해야합니다 ....

<head>
<style>
    .colored-div-table {
        display: table;
        table-layout: fixed;
    }
    .colored-div-table #col {
        display: table-column;
    }
    .colored-div-table #col:nth-child(odd) {
    }
    .colored-div-table #col:nth-child(even) {
    }
    .colored-div-table #col:nth-child(1){
        background-color: lightblue;
        width: 50px !important;
    }
    .colored-div-table #col:nth-child(2){
        background-color: lightyellow;
        width: 200px !important;
    }
    .colored-div-table #col:nth-child(3){
        background-color: lightcyan;
        width: 50px !important;
    }
    .colored-div-table #row {
        display: table-row;
    }
    .colored-div-table #row div {
        display: table-cell;
    }
    .colored-div-table #row div:nth-child(1) {

    }
    .colored-div-table #row div:nth-child(2) {
    }
    .colored-div-table #row div:nth-child(3) {
    }
    .colored-div-table #row:nth-child(odd) {
        background-color: rgba(0,0,0,0.1)
    }
    .colored-div-table #row:nth-child(even) {
    }
</style>
</head>
<body>

<div id="divtable" class="colored-div-table">
    <div id="col"></div>
    <div id="col"></div>
    <div id="col"></div>  

    <div id="row">
        <div>First Line</div><div>FL C2</div><div>FL C3></div>
    </div>

    <div id="row">
        <div>Second Line</div><div>SL C2</div><div>SL C3></div>
    </div>

    <div id="row">
        <div>Third Line</div><div>TL C2</div><div>TL C3></div>
    </div>

    <div id="row">
        <div>Forth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Eight Line</div><div>EL C2</div><div>EL C3></div>
    </div>
    <div id="row">
        <div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
    </div>
    <div id="row">
        <div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
    </div>

</div>
</body>

나는 그것이 늦었다는 것을 알고 있지만, 당신은 버튼에 래퍼를 사용하고 rgba 색상 기능 불투명도 레벨을 변경할 수 있지만 다른 답변에서 언급되었지만 명확한 예는 없습니다.

펜은 다음과 같습니다.

https://codepen.io/aronkof/pen/WzGmjR

#wrapper {
  width: 50vw;
  height: 50vh;
  background-color: #AAA;
  margin: 20px auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
} 

.btn-wrap {
  background-color: #000;
  display: inline-block;
}

button {
  transition: all 0.6s linear;
  background-color: rgba(0, 255, 0, 1);
  border: none;
  outline: none;
  color: #fff;
  padding: 50px;
  font-weight: 700;
  font-size: 2em;
}

button:hover {
  background-color: rgba(0, 255, 0, .5);
}
<div id="wrapper">
  <div class="btn-wrap">
    <button class="btn">HEY!</buutton>
  </div>
</div>

background색상 만 변경하면 미래에 대비할 수있는 훌륭한 방법입니다 linear-gradient. background이미지에 방법을 사용하십시오 !

아래 예를 확인하십시오.

document
  .getElementById('colorpicker')
  .addEventListener('change', function(event) {
    document
      .documentElement
      .style.setProperty('--color', event.target.value);
  });
span {
  display: inline-block;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  vertical-align: middle;
}

.red {
  background-color: red;
}

.red-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) red;
}

:root {
  --color: lime;
}

.dynamic-color {
  background-color: var(--color);
}

.dynamic-color-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) var(--color);
}
<table>
  <tr>
    <td><strong>Static Color</strong></td>
    <td><span class="red"></span></td>
    <td><span class="red-darker"></span></td>
  </tr>
  <tr>
    <td><strong>Dynamic Color</strong></td>
    <td><span class="dynamic-color"></span></td>
    <td><span class="dynamic-color-darker"></span></td>
  </tr>
</table>
<br/>
Change the dynamic color: <input id="colorpicker" value="#00ff00" type="color"/>

크레딧 : https://css-tricks.com/css-custom-properties-theming/

Ctford의 답변에 대한 내 의견을 참조하십시오.

색상을 밝게하는 쉬운 방법은 각 RGB 구성 요소를 가져 와서 0xff에 더하고 2로 나누는 것입니다. 그러면 원하는 정확한 결과를 얻지 못하면 0xff에서 현재 값에 약간의 상수를 뺀 값을 취하십시오 그런 다음 현재 값으로 다시 추가하십시오. 예를 들어 1/3을 흰색쪽으로 돌리려면 (0xff-전류) / 3 + 전류를 사용하십시오.

어떤 결과를 얻으려면 그것을 가지고 놀아야합니다. 이 간단한 수식을 사용하면 어두운 색상을 희미하게 희미하게 만들 정도로 큰 요소가 밝은 색상을 완전히 흰색으로 바꿀 수 있지만 밝은 색상 만 약간 밝게 만들 정도로 작은 요인은 어두운 색상을 충분히 밝게 만들지 않을 것이라고 걱정할 것입니다.

그럼에도 불구하고, 나는 흰색으로의 거리의 일부로가는 것이 정해진 수의 단계보다 유망하다고 생각합니다.

이 서버 측을 수행 할 수있는 PHP 클래스를 찾았습니다. 더 밝거나 어둡게 해야하는 모든 것에 대해 인라인 CSS 색상 스타일을 출력합니다. 잘 작동합니다.

http://www.barelyfitz.com/projects/csscolor/

(이 클래스는 오류를 던지기 위해 PEAR을 사용하지만 색상을 수정하기 위해 PEAR을 포함하고 싶지는 않았으므로 모든 PEAR 참조를 제거했습니다)

새 객체를 만들지 않고 "lighten"및 "darken"함수를 직접 호출 할 수 있도록 정적 메서드를 사용하여 정적 클래스로 변환했습니다.

샘플 사용법 : 

$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);

LESS 또는 SASS없이 원시 CSS3 및 SVG를 사용하여 답변을 추가하고 있습니다.

기본적으로 전역 호버 효과를 위해 색상을 10 %, 25 %, 50 %보다 작게 또는 어둡게 만드는 것이 문제라면 다음과 같은 SVG 데이터 호출을 만들 수 있습니다

:root{
--lighten-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssLighten" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="white" width="50" height="50"/></svg>') !important;
--darken-bg: url('data:image/svg+xml;utf8,<svg version="1.1" id="cssDarken" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><rect opacity="0.2" fill="black" width="50" height="50"/></svg>') !important;

}

.myButton{
    color: white;
    background-color:blue;
}
.myButton:hover{
    background-image: var(--lighten-bg);
}

나에게 알려지지 않은 이유로 SVG는 "fill"속성에 16 진수 값을 입력 할 수 없지만 "white"및 "black"은 내 요구를 충족시킵니다.

생각할 음식 : 이미지를 사용하는 것이 마음에 들지 않으면 50 % 투명 PNG를 배경 이미지로 사용하십시오. 화려하고 싶다면 PHP 스크립트를 배경 이미지로 호출하고 HEX 및 OPACITY 값을 전달하고 위의 SVG 코드를 뱉어 내십시오.

오래된 브라우저 호환성을 위해 강제로 사용해야하는 경우 Colllor 를 사용 하여 유사한 색상 변형을 자동으로 선택할 수 있습니다 .

예 (색상 : # a9dbb4) :

여기에 이미지 설명을 입력하십시오

JXtension과 같은 JavaScript 라이브러리를 사용하면 색상을 밝거나 어둡게 만들 수 있습니다. 이 새로운 라이브러리에 대한 설명서를 찾으려면 여기를 클릭하십시오 . JXtension을 사용하여 한 색상을 다른 색상과 결합 할 수도 있습니다.

jPaq ( http://jpaq.org/ )가 JXtension을 대체하는 것처럼 보입니다. jPaq 사용의 이점은 전체 JavaScript 라이브러리 대신 필요한 것만 다운로드 할 수 있다는 것입니다. 다음은 Color 클래스 ( http://jpaq.org/download/1.0.0.1008) 의 다운로드 페이지 링크 입니다.

나는이 같은 문제를 다루는 jquery 용 플러그인을 작성했습니다. 색상을 속성 또는 원하는 CSS 속성의 설정된 색상으로 가져 와서 계산을 수행합니다. 16 진수를 RGB로 곱한 다음 오프셋 백분율을 곱한 다음 새 값을 반환합니다. 예를 원하면 알려주세요.

참고 URL : https://stackoverflow.com/questions/1625681/dynamically-change-color-to-lighter-or-darker-by-percentage-css-javascript

반응형

'Programing' 카테고리의 다른 글

선택기가 null을 반환하는지 어떻게 알 수 있습니까?  (0) 2020.03.30
ID에 대한 Android 조각을 볼 수 없습니까?  (0) 2020.03.30
Twitter 부트 스트랩 팝 오버 내의 HTML  (0) 2020.03.30
힘내와 "지점 'x'가 완전히 병합되지 않았습니다"오류  (0) 2020.03.29
Java에서 환경 변수를 설정하는 방법  (0) 2020.03.29

'Programing'의 다른글

  • 현재글CSS (자바 스크립트)에 따라 색상을 밝거나 어둡게 동적으로 변경

관련글

댓글

티스토리툴바