2

Фон всей страницы серый. Скачал небольшой логотип, естественно на странице он отображается как белый квадрат внутри которого расположен логотип. Вопрос: как изменить/закрасить белый фон изображения в серый цвет страницы при помощи CSS?

4 ответа 4

3

в фотошопе убрать белый фон логотипа и сохранить в формате png. При помощи css - никак, если у вас jpg/png c фоном.

1
  • Точнее, нужно сделать фон прозрачным, чтобы он мог накладываться на любую страницу.
    – Dmitriy
    28 фев 2019 в 13:00
3

Решил задачку при помощи Inkscape за пару минут.

  • Загружаем лого File >>> Open
  • В inkscape выбираем Path >>> Trace Bitmap
  • Убираем галки с чекбоксов Smooth и Stack scans
  • Ставим галку Remove background
  • Radio-группа выбираем Greys (whatever)
  • Scans по минимуму 2
  • Update >>> OK
  • File >>> Export png
  • Видео https://www.youtube.com/watch?v=ESXJ_0Fa0rs
2
  • 1
    1. А не спам ли это? 2. Превращать векторную картинку в растровую - это бррррр...
    – Qwertiy
    28 фев 2019 в 21:20
  • @Qwertiy Не спам, для моих скромных задач решение оптимальное. 28 фев 2019 в 23:00
3

Вариант сделать вручную не рассматриваю - тут вопросы и ответы по программированию.

Это конечно не CSS, это фильтр на WebGL который заменяет выбранный цвет цвет на прозрачный с определенным порогом.

Использование:

let img = removeColor(
    url, // адрес картинки
    255, // red
    255, // green
    255, // blue
    0.1  // порог
);

Этот вызов вернет canvas, с изображением, в котором выбранный цвет заменен на прозрачный.

function removeColor(url, r, g, b, a) {

  let canvas = document.createElement('canvas');
  let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  let loader = new Image();
  loader.crossOrigin = "anonymous";
  loader.src = url;
  loader.onload = function() { 
  
    let w = canvas.width = loader.width;
    let h = canvas.height = loader.height;

    let pid = gl.createProgram();

    shader(`
      attribute vec2 coords;
      
      void main(void) {
        gl_Position = vec4(coords.xy, 0.0, 1.0);
      }
    `, gl.VERTEX_SHADER);

    shader(`
      precision highp float;
      uniform sampler2D texture;

      void main(void) {
        vec2 uv = vec2(
          gl_FragCoord.x/${w}., 
          1. - gl_FragCoord.y/${h}.
        );
        vec4 tex = texture2D(texture, uv);
        vec3 c = abs(vec3(${r}., ${g}., ${b}.)/255. - tex.rgb);
        if (c.r < ${a} && c.g < ${a} && c.b < ${a})
            gl_FragColor = vec4(0.);
        else
            gl_FragColor = vec4(tex.xyz, 1.);
      }
    `, gl.FRAGMENT_SHADER);

    gl.linkProgram(pid);
    gl.useProgram(pid);

    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,  3, -1, -1, 3, -1]), gl.STATIC_DRAW);

    let al = gl.getAttribLocation(pid, "coords");
    gl.vertexAttribPointer(al, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(al);

    gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, loader);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    gl.uniform1i(gl.getUniformLocation(pid, "texture"), 0);
    gl.viewport(0, 0, w, h);
    gl.clearColor(0, 0, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    function shader(src, type) {
      let sid = gl.createShader(type);
      gl.shaderSource(sid, src);
      gl.compileShader(sid);
      gl.attachShader(pid, sid);
    }
  }
  
  return canvas;
}
body {
  background-color: lightgray;
  overflow: hidden;
  padding-top: 20px;
  zoom: 87%;
}
<img>
<script>
  let url = "https://webglfundamentals.org/webgl/resources/star.jpg";
  document.querySelector('img').src = url;
  setTimeout(() => {
    document.body.append(removeColor(url, 255, 255, 255, 0.1));
    document.body.append(removeColor(url, 0, 0, 0, 0.5));
  });
</script>

0
0

дай Img класс, в css background-color: цвет твоего фона, готово

1
  • 1
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 3 окт 2022 в 13:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.