배경색에 따라 CSS 글꼴 색상 반전

배경색에 따라 CSS 글꼴 색상 반전

---

이 그림 font-color에 따라 반전하는 CSS 속성 background-color이 있습니까?

---

mix-blend-mode 라는 CSS 속성이 있지만 IE에서 지원하지 않습니다. 의사 요소를 사용하는 것이 좋습니다 . IE6 및 IE7을 지원하려면 유사 요소 대신 두 개의 DIV 를 사용할 수도 있습니다 .

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

---

예, 이제 있습니다. 를 사용하면 mix-blend-modeCSS로이 작업을 수행 할 수 있습니다.

http://jsfiddle.net/1uubdtz6/

div {
    position:absolute;
    height:200px
}

/* A white bottom layer */
#whitebg { 
    background: white; 
    width:400px; 
    z-index:1
}

/* A black layer on top of the white bottom layer */
#blackbg { 
    background: black; 
    width:100px; 
    z-index:2
}

/* Some white text on top with blend-mode set to 'difference' */
span {
    position:absolute; 
    font-family: Arial, Helvetica; 
    font-size: 100px; 
    mix-blend-mode: difference;
    color: white;
    z-index: 3
}

/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered { 
    background-color: red;
    mix-blend-mode: screen;
    width:400px; 
    z-index:4
}

<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>

<span>test</span>

현재 이것은 최첨단이며 모든 브라우저에서 널리 지원되지는 않지만 언젠가는 표준이 될 수 있습니다. 이것이 제대로 작동하려면 블렌드 모드 기능을 활성화해야 할 것입니다.

http://html.adobe.com/webplatform/enable/

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 mix-blend-mode.에 대해 배우기 전에 사용했던 다른 솔루션을 추가하고 싶었습니다 .

아이디어는 배경과 전경의 배경과 텍스트 색상이 다른 두 레이어, 즉 배경과 전경에 정보를 복제하는 것입니다. 치수와 텍스트가 동일합니다. 그 사이에 클리핑 상자 div를 사용 하여 상단 레이어를 원하는 너비로 자르고 클리핑 되지 않은 상단 레이어를 표시하고 클리핑 창 외부에 배경 레이어를 표시합니다.

이것은 허용되는 답변의 "Two div"솔루션과 유사하지만 추가 클리핑 상자를 사용합니다. 원하는 경우 텍스트를 쉽게 중앙에 배치하고 색상을 간단하고 직접 선택할 수 있습니다.

HTML :

<div class='progress' id='background'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='foreground'>
    </div>
  </div>
</div>

CSS (혼동 ID 이름 "배경"및 "전경"에 대해 사과드립니다) :

.progress {
  display: block;
  margin: 0;

  /* Choose desired padding/height in coordination with font size */
  padding: 10px;
  height: 28px;
}

#background {
  position: relative;

  /* Choose a border to your liking, or none */
  border: 1px solid lightgray;

  /* Choose your desired text attributes */
  text-align: center;
  font-family: Calibri, "Sans Serif";
  font-size: 16pt;

  /* Set the desired width of the whole progress bar */
  width: 75%;

  /* Choose the desired background and text color */
  background-color: white;
  color: black;
}

#foreground {
  position: absolute;
  left: 0;
  top: 0;

  /* Choose the desired background and text colors */
  background-color: navy;
  color: white;
}

#boundbox {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

jQuery를 사용하여 진행률을 프로그래밍 방식으로 설정하고 전경 너비가 배경 너비와 일치하고 텍스트가 동일한 지 확인합니다. 이것은 순수한 자바 스크립트로도 쉽게 할 수 있습니다.

// Set foreground width to background width
// Do this after DOM is ready
$('#foreground').width($('#background').width())

// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45   /* Compute a % complete value */
$('#foreground').text(`${percent_complete}% complete`)
$('#background span').text($('#foreground').text())
$('#boundbox').css('width', `${percent_complete}%`)

그리고 여기 바이올린이 있습니다 : 진행률 표시 줄 .

Chrome, Firefox 및 Microsoft Edge에서 이것을 테스트했습니다.

---

이해하기 더 간단하다고 생각합니다.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.titulo{
    text-align: center;
    margin: 2em;
}
.padre{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10em;
    position: relative;
    width: 1000px;
    height: 500px;
}
.caja-1{
    background-color: black;
    width: 500px;
    height: 500px;
    left: 0;
    mix-blend-mode: screen;
    position:absolute;
}
.caja-3{
    width: 500px;
    height: 500px;
    display: flex;
    background-color: white;
    position: absolute;
    right: 0;
}
.texto{
    font-size: 5em;
    color: white;
    mix-blend-mode: difference;
    position:absolute;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ESTILOS CONTRASTADOS CSS3</title>
</head>
<body>
    <h1 class="titulo">MIX-BLEND-MODE CSS EFFECT</h1>
    <div class="padre">
        <div class="caja-1"></div>
        <div class="caja-3"></div>
        <h1 class="texto">CODE STOCK CENTER</h1>
    </div>
</body>
</html>

참고 URL : https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color