Hướng dẫn javascript change text color based on background - javascript thay đổi màu văn bản dựa trên nền

Tôi đang tìm kiếm một plugin hoặc kỹ thuật thay đổi màu của văn bản hoặc chuyển đổi giữa các hình ảnh/biểu tượng được xác định trước tùy thuộc vào độ sáng trung bình của các pixel được che phủ của hình ảnh nền hoặc màu của cha mẹ.

Nếu khu vực được bảo hiểm của nền của nó khá tối, hãy làm cho văn bản màu trắng hoặc chuyển đổi các biểu tượng.

Ngoài ra, thật tuyệt nếu tập lệnh sẽ nhận thấy nếu cha mẹ không có màu nền hoặc -image xác định và sau đó tiếp tục tìm kiếm gần nhất [từ phần tử cha đến phần tử cha của nó ..].

Bạn nghĩ gì, biết về ý tưởng này? Có một cái gì đó tương tự ngoài kia chưa? Ví dụ?

Hỏi ngày 8 tháng 8 năm 2012 lúc 15:08Aug 8, 2012 at 15:08

James Cazzettajames CazzettaJames Cazzetta

2.9526 Huy hiệu vàng32 Huy hiệu bạc54 Huy hiệu Đồng6 gold badges32 silver badges54 bronze badges

4

Tài nguyên thú vị cho việc này:

• W3C - Đảm bảo rằng các kết hợp màu nền và nền cung cấp đủ độ tương phản
• Tính toán độ sáng nhận thức của một màu

Đây là thuật toán W3C [với bản demo JSFiddle]:

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval[setContrast, 1000];

function setContrast[] {
  // Randomly update colours
  rgb[0] = Math.round[Math.random[] * 255];
  rgb[1] = Math.round[Math.random[] * 255];
  rgb[2] = Math.round[Math.random[] * 255];

  // //www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round[[[parseInt[rgb[0]] * 299] +
                      [parseInt[rgb[1]] * 587] +
                      [parseInt[rgb[2]] * 114]] / 1000];
  const textColour = [brightness > 125] ? 'black' : 'white';
  const backgroundColour = 'rgb[' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ']';
  $['#bg'].css['color', textColour]; 
  $['#bg'].css['background-color', backgroundColour];
}

#bg {
  width: 200px;
  height: 50px;
}

Text Example

Đã trả lời ngày 8 tháng 8 năm 2012 lúc 15:38Aug 8, 2012 at 15:38

3

Bài viết này về 24 cách để tính toán độ tương phản màu sắc có thể được bạn quan tâm. Bỏ qua bộ chức năng đầu tiên vì chúng sai, nhưng công thức YIQ sẽ giúp bạn xác định xem có nên sử dụng màu tiền cảnh sáng hay tối hay không.

Khi bạn có được màu nền của phần tử [hoặc tổ tiên], bạn có thể sử dụng chức năng này từ bài viết để xác định màu tiền cảnh phù hợp:

function getContrastYIQ[hexcolor]{
    hexcolor = hexcolor.replace["#", ""];
    var r = parseInt[hexcolor.substr[0,2],16];
    var g = parseInt[hexcolor.substr[2,2],16];
    var b = parseInt[hexcolor.substr[4,2],16];
    var yiq = [[r*299]+[g*587]+[b*114]]/1000;
    return [yiq >= 128] ? 'black' : 'white';
}

radu122

2.77622 huy hiệu bạc24 Huy hiệu đồng22 silver badges24 bronze badges

Đã trả lời ngày 8 tháng 8 năm 2012 lúc 15:52Aug 8, 2012 at 15:52

Cyangcyangcyang

5.3042 Huy hiệu vàng24 Huy hiệu bạc34 Huy hiệu đồng2 gold badges24 silver badges34 bronze badges

4

#bg {
  width: 200px;
  height: 50px;
}

header {
  overflow: hidden;
  height: 100vh;
  background: url[//www.w3schools.com/html/pic_mountain.jpg] 50%/cover;
}

h2 {
  color: white;
  font: 900 35vmin/50vh arial;
  text-align: center;
  mix-blend-mode: difference;
  filter: drop-shadow[0.05em 0.05em orange];
}

  
Edit me here

Ngoài ra [tháng 3 năm 2018]: Sau đây, một hướng dẫn hay giải thích tất cả các loại chế độ/triển khai khác nhau: //css-tricks.com/css-techniques-and-effects-for-nockout-text/

Đã trả lời ngày 10 tháng 5 năm 2017 lúc 15:16May 10, 2017 at 15:16

James Cazzettajames CazzettaJames Cazzetta

2.9526 Huy hiệu vàng32 Huy hiệu bạc54 Huy hiệu Đồng6 gold badges32 silver badges54 bronze badges

Tài nguyên thú vị cho việc này:

W3C - Đảm bảo rằng các kết hợp màu nền và nền cung cấp đủ độ tương phản

var rgb = $['#test'].css['backgroundColor'];
var colors = rgb.match[/^rgb\[[\d+],\s*[\d+],\s*[\d+]\]$/];
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor[[255-r]*brightness];
var ig = Math.floor[[255-g]*brightness];
var ib = Math.floor[[255-b]*brightness];

$['#test'].css['color', 'rgb['+ir+','+ig+','+ib+']'];

Tính toán độ sáng nhận thức của một màu

Đây là thuật toán W3C [với bản demo JSFiddle]:3 gold badges41 silver badges58 bronze badges

Đã trả lời ngày 8 tháng 8 năm 2012 lúc 15:38Aug 8, 2012 at 15:22

Bài viết này về 24 cách để tính toán độ tương phản màu sắc có thể được bạn quan tâm. Bỏ qua bộ chức năng đầu tiên vì chúng sai, nhưng công thức YIQ sẽ giúp bạn xác định xem có nên sử dụng màu tiền cảnh sáng hay tối hay không.jeremyharris

Khi bạn có được màu nền của phần tử [hoặc tổ tiên], bạn có thể sử dụng chức năng này từ bài viết để xác định màu tiền cảnh phù hợp:21 silver badges31 bronze badges

8

2.77622 huy hiệu bạc24 Huy hiệu đồng

Đã trả lời ngày 8 tháng 8 năm 2012 lúc 15:52

Cyangcyang

[Source]

5.3042 Huy hiệu vàng24 Huy hiệu bạc34 Huy hiệu đồngSep 3, 2015 at 12:57

#bg {
  width: 200px;
  height: 50px;
}

Ngoài ra [tháng 3 năm 2018]: Sau đây, một hướng dẫn hay giải thích tất cả các loại chế độ/triển khai khác nhau: //css-tricks.com/css-techniques-and-effects-for-nockout-text/6 silver badges10 bronze badges

2

Đã trả lời ngày 10 tháng 5 năm 2017 lúc 15:16

const hexToRgb = hex => {
    // turn hex val to RGB
    const result = /^#?[[a-f\d]{2}][[a-f\d]{2}][[a-f\d]{2}]$/i.exec[hex]
    return result
        ? {
              r: parseInt[result[1], 16],
              g: parseInt[result[2], 16],
              b: parseInt[result[3], 16]
          }
        : null
}

// calc to work out if it will match on black or white better
const setContrast = rgb =>
    [rgb.r * 299 + rgb.g * 587 + rgb.b * 114] / 1000 > 125 ? 'black' : 'white'

const getCorrectColor = setContrast[hexToRgb[#ffffff]]

Câu hỏi thú vị. Suy nghĩ ngay lập tức của tôi là đảo ngược màu của nền như văn bản. Điều này liên quan đến việc chỉ đơn giản là phân tích nền và đảo ngược giá trị RGB của nó.

Một cái gì đó như thế này: //jsfiddle.net/2vtnz/2/2 gold badges43 silver badges49 bronze badges

ShazOct 20, 2017 at 13:53

15,5k3 huy hiệu vàng41 Huy hiệu bạc58 Huy hiệu đồng

        $['.elzahaby-bg'].each[function [] {
            var rgb = $[this].css['backgroundColor'];
            var colors = rgb.match[/^rgb\[[\d+],\s*[\d+],\s*[\d+]\]$/];

            var r = colors[1];
            var g = colors[2];
            var b = colors[3];

            var o = Math.round[[[parseInt[r] * 299] + [parseInt[g] * 587] + [parseInt[b] * 114]] /1000];

            if[o > 125] {
                $[this].css['color', 'black'];
            }else{
                $[this].css['color', 'white'];
            }
        }];

*{
    padding: 9px;
}

#bg {
  width: 200px;
  height: 50px;
}

Đã trả lời ngày 8 tháng 8 năm 2012 lúc 15:22Apr 26, 2020 at 19:28

JeremyharrisjeremyharrisA. El-zahaby

7,86821 Huy hiệu bạc31 Huy hiệu đồng11 silver badges29 bronze badges

Tôi đã tìm thấy tập lệnh nền tảng rất hữu ích.

#bg {
  width: 200px;
  height: 50px;
}

Nó phát hiện độ sáng quá mức của nền [có thể là hình nền hoặc màu] và áp dụng một lớp cho phần tử văn bản được gán [

#bg {
  width: 200px;
  height: 50px;
}

Text Example

#bg {
  width: 200px;
  height: 50px;
}

Nó có thể được áp dụng cho các yếu tố tĩnh và di chuyển.

#bg {
  width: 200px;
  height: 50px;
}

Đã trả lời ngày 3 tháng 9 năm 2015 lúc 12:57

cptstarlingcptstarling

7596 Huy hiệu bạc10 Huy hiệu ĐồngAug 19, 2012 at 22:10

Nếu bạn đang sử dụng ES6, hãy chuyển đổi HEX thành RGB thì có thể sử dụng điều này:Nathan MacInnes

RJB4 gold badges35 silver badges48 bronze badges

0

8.9182 Huy hiệu vàng43 Huy hiệu bạc49 Huy hiệu đồng

#bg {
  width: 200px;
  height: 50px;
}

Đã trả lời ngày 20 tháng 10 năm 2017 lúc 13:53

#bg {
  width: 200px;
  height: 50px;
}

#bg {
  width: 200px;
  height: 50px;
}

#bg {
  width: 200px;
  height: 50px;
}

Bằng cách kết hợp các câu trả lời [ @Alex-Ball, @JeremyHarris] Tôi thấy đây là cách tốt nhất cho tôi:Jun 12 at 21:10

Đã trả lời ngày 26 tháng 4 năm 2020 lúc 19:28vanowm

A. El-Zahabya. El-Zahaby2 gold badges18 silver badges34 bronze badges

0