прозрачный фон для gif изображения

??? · June 13, 2012

добрый вечер уважаемые форумчане.

вот такой вопрос:

у меня на страничке имеется n-ое кол-во изображений в формате gif, которые посредством javascript могут быть наложенны друг на друга... дело в том, что если одна картинка попадает на другую, то фон (белый) картинки, которая сверху виден на нижней...что не очень красиво.

как на html, или может даже на css или javascript сделать прозрачный фон??

заранее спасибо.

Vin · June 13, 2012

А вытравить фон в графическом редакторе как вариант не рассматривается?

Modestes · June 13, 2012

может у вас для блока с картинкой задан background?

просто не может картинка отдельно исчезать оставляя фон, это ведь единое целое.

не лучше преобразовать их в png и оптимизировать изображения? если конечно они статичные

flintovich · June 13, 2012

Покажите пожалуйста пример.

??? · June 13, 2012


<!DOCTYPE html>
<html>
 <head>
  <title>просто так </title>
  <meta name='robots' content='noindex, nofollow'>
  <style>
   html { overflow:  hidden; }
   body { margin: 0; }
   img {
    position: absolute;
    left: 500px;
    top: 250px;
   }
  </style>
  <script type='text/javascript'>
   ns4 = (document.layers)? true:false
   ie4 = (document.all)? true:false
   var mouse_x = y = 0;
   function init() {
	if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
	document.onmousemove=mousemove;
   }
   function mousemove(event) {

	if (document.attachEvent != null) {
	 mouse_x = window.event.clientX;
	 mouse_y = window.event.clientY;
    } else if (!document.attachEvent && document.addEventListener) {
	 mouse_x = event.clientX;
	 mouse_y = event.clientY;
	}
	status="x = " + mouse_x + ", y = " + mouse_y;
	document.getElementById('xy').innerHTML = "x = " + mouse_x + ", y = " + mouse_y;
   }
  init()


   var i;
   var v = 19;
   var mass_di = new Array, mass_dj = new Array;
   for (i = v; i > -1; i--) {
    mass_di[i] = 250;
    mass_dj[i] = 500;
   }

  function f_img() {
   for (i = v; i > -1; i--) {
    document.getElementById('img'+i).style.width = document.getElementById('img'+i).width + 2 + 'px';
    document.getElementById('img'+i).style.height = document.getElementById('img'+i).height + 2 + 'px';
   }

   for (i = v; i > -1; i--) {
    mass_di[i] -= 1;
    mass_dj[i] -= 1;
   }

   for (i = v; i > -1; i--) {
    document.getElementById('img'+i).style.top = mass_di[i] + 'px';
    document.getElementById('img'+i).style.left = mass_dj[i] + 'px';
    if (document.getElementById('img'+i).width >= 200) {

     new_img();

    }
   }
  }
  function new_img() {   //  alert('');
   document.getElementById('img'+i).style.width = 1 + 'px';
   document.getElementById('img'+i).style.height = 1 + 'px';
   document.getElementById('img'+i).style.top = mouse_y[i] + 'px';
   document.getElementById('img'+i).style.left = mouse_x[i] + 'px';

    mass_di[i] = mouse_y;
    mass_dj[i] = mouse_x;
  }

  </script>
 </head>
 <body>
 <span id="xy"></span>
  <div id='syda'>
   <script type='text/javascript'><!--
    for (var i = 19; i > -1; i--) {
     document.write("<img src='zr.gif' class='img img"+i+"' id='img"+i+"' width='" + (i * 10) + "' height='" + (i * 10) + "'>");
    }
   --></script>
  </div>
  <script type='text/javascript'><!--
   f_img();
   setInterval("f_img();",1);
  --></script> 
 </body>
</html>

попробуйте создать у себя html файл с этим кодом, прикрепить картинку в тот же каталог и посмотреть что получится

Edited June 13, 2012 by ???

??? · June 13, 2012

тем более я не хочу белый фон..и тогда вообще не красиво будет((

flintovich · June 13, 2012


<!DOCTYPE html>
<html>
 <head>
  <title>просто так </title>
  <meta name='robots' content='noindex, nofollow'>
  <style>
   html { overflow:  hidden; }
   body { margin: 0; }
   img {
    position: absolute;
    left: 500px;
    top: 250px;
   }
  </style>
  <script type='text/javascript'>
   ns4 = (document.layers)? true:false
   ie4 = (document.all)? true:false
   var mouse_x = y = 0;
   function init() {
	if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
	document.onmousemove=mousemove;
   }
   function mousemove(event) {

	if (document.attachEvent != null) {
	 mouse_x = window.event.clientX;
	 mouse_y = window.event.clientY;
    } else if (!document.attachEvent && document.addEventListener) {
	 mouse_x = event.clientX;
	 mouse_y = event.clientY;
	}
	status="x = " + mouse_x + ", y = " + mouse_y;
	document.getElementById('xy').innerHTML = "x = " + mouse_x + ", y = " + mouse_y;
   }
  init()


   var i;
   var v = 19;
   var mass_di = new Array, mass_dj = new Array;
   for (i = v; i > -1; i--) {
    mass_di[i] = 250;
    mass_dj[i] = 500;
   }

  function f_img() {
   for (i = v; i > -1; i--) {
    document.getElementById('img'+i).style.width = document.getElementById('img'+i).width + 2 + 'px';
    document.getElementById('img'+i).style.height = document.getElementById('img'+i).height + 2 + 'px';
   }

   for (i = v; i > -1; i--) {
    mass_di[i] -= 1;
    mass_dj[i] -= 1;
   }

   for (i = v; i > -1; i--) {
    document.getElementById('img'+i).style.top = mass_di[i] + 'px';
    document.getElementById('img'+i).style.left = mass_dj[i] + 'px';
    if (document.getElementById('img'+i).width >= 200) {

     new_img();

    }
   }
  }
  function new_img() {   //  alert('');
   document.getElementById('img'+i).style.width = 1 + 'px';
   document.getElementById('img'+i).style.height = 1 + 'px';
   document.getElementById('img'+i).style.top = mouse_y[i] + 'px';
   document.getElementById('img'+i).style.left = mouse_x[i] + 'px';

    mass_di[i] = mouse_y;
    mass_dj[i] = mouse_x;
  }

  </script>
 </head>
 <body>
 <span id="xy"></span>
  <div id='syda'>
   <script type='text/javascript'><!--
    for (var i = 19; i > -1; i--) {
     document.write("<img src='zr.gif' class='img img"+i+"' id='img"+i+"' width='" + (i * 10) + "' height='" + (i * 10) + "'>");
    }
   --></script>
  </div>
  <script type='text/javascript'><!--
   f_img();
   setInterval("f_img();",1);
  --></script> 
 </body>
</html>

попробуйте создать у себя html файл с этим кодом, прикрепить картинку в тот же каталог и посмотреть что получится

Понял вашу проблему, но обрезал картинку до главного содержимого и противного наложения не стало, вот пример.

Edited June 13, 2012 by flintovich

??? · June 13, 2012

намёк понял. мне надо просто обрезать свою картинку..

спасибо

не совсем понимаю...у вашей птички есть много "белого" пространства...почему оно не отображается??

flintovich · June 13, 2012

намёк понял. мне надо просто обрезать свою картинку..
спасибо
не совсем понимаю...у вашей птички есть много "белого" пространства...почему оно не отображается??

Это не белое пространство.) Картинка ведь прозрачная)

Просто из-за того, что ваша картинка была размеров больше нужного, то изображение налазило на другое с большими как бы "границами" .

Edited June 13, 2012 by flintovich

??? · June 13, 2012

да, но у вашей версии как бы границ почти вообще нет (только маленькая кайма вокруг).

я обрезал свою картинку под минимум...но это не помогло :mellow:

flintovich · June 13, 2012

А можно ваше изображение?

??? · June 13, 2012

http://cs407327.userapi.com/v407327117/c7c/Z5zU2OltfM0.jpg

http://cs407327.userapi.com/v407327117/c83/maiyurYuht0.jpg

http://cs407327.userapi.com/v407327117/c8a/RlKkeK8mkGs.jpg

Edited June 13, 2012 by ???

flintovich · June 13, 2012

Вот, пожалуйста)

Только изображение по краям немного подправить надо.

??? · June 13, 2012

спасибо огромное!!

а как вы это сделали? если не секрет

flintovich · June 13, 2012

спасибо огромное!!
а как вы это сделали? если не секрет

Обращайтесь) Будет свободное время с удовольствием помогу.

Взял вашу картинку, белый фон сделал прозрачным и сохранил в gif формате.

??? · June 14, 2012

Обращайтесь) Будет свободное время с удовольствием помогу.
Взял вашу картинку, белый фон сделал прозрачным и сохранил в gif формате.

хмм...надо попробовать :huh:

спасибо большое :)

Sign In

прозрачный фон для gif изображения

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information