Поместите изображение .png частично поверх (сверху) меню

У меня есть меню аккордеона, которое я настроил в соответствии с моими потребностями. Моим последним камнем преткновения является то, что у меня есть изображение (см. Прикрепленное изображение) Courier FedEx, которое мне нужно возложить на верх над меню, и все же разрешить пользователям щелкнуть его, чтобы активировать (получить доступ) меню аккордеона. Изображение представляет собой отдельное изображение, которое настроено на нужную альфу, созданную в Photoshop. Файл - это всего лишь снимок того, как он будет выглядеть, если бы это было так, как я этого хотел.Поместите изображение .png частично поверх (сверху) меню

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

Original full size Image file site page

источник

2015-07-09 user22278

Вы должны показать, что вы попробовали и существующий код в сниппета. Чтобы ответить «где разместить это», нам нужно указать на ваш код и сказать «Здесь», правильно? – light

Вы уже создали какое-либо из них или ищете руководство? Код был бы оценен. –

То, что вы пытаетесь сделать, - плохой дизайн. – Slime

Вы можете применить CSS:

pointer-events: none;

к изображению выше ссылкам.

См скрипка https://jsfiddle.net/4zgcrkyz/

источник

2015-07-09 04:10:54 c01gat3

pointer-events: none; является подходящим решением, если вам не нужно заботиться о IE < 11. More info on compatibility here.

В качестве альтернативы вы можете использовать elementFromPoint(), который имеет IE совместимость> 5,5

Следующая хитрость позволит вам выбрать под обложкой без использования pointer-events: none;

https://jsbin.com/tuhotagize/edit?html,output

Пояснение:

Нажмите на изображение обложки.
Скрыть изображение крышки временное.
Получить координаты мыши.
Получить HTML-элемент под этими координатами мыши (чтобы вы знали, что под крышкой).
Триггерное событие click на этом HTML-элементе.
Показать изображение обложки еще раз.

Другой вариант решения вашей проблемы, которая не включает в себя JS является:

Обрезать изображение в PhotoShop, как должно появиться в меню. Использовать свойство background-image CSS на нем
Используйте изображение курьера FedEx только в качестве фонового изображения CSS на теле страницы.

Вы можете добиться того же визуального эффекта, используя только CSS.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <style> 
     img { 
      position: absolute; 
      top: 0; 
      left: 0; 
      opacity: 0.4; 
     } 

     a { 
      display: block; 
      width: 300px; 
      height: 20px; 
      background-color: greenyellow; 
     } 

      a:hover { 
       background-color: #FF0000; 
      } 
    </style> 
    <script> 
     window.app = { 
      show: function() { 
       document.getElementById('cover').style.display = ''; 
      }, 
      hide: function() { 
       document.getElementById('cover').style.display = 'none'; 
      }, 
      event: null, 
      start: function() { 
       document.getElementById('cover').addEventListener('click', function (event) { 
        this.hide(); 
        this.event = event; 
        var target = document.elementFromPoint(event.pageX, event.pageY); 
        this.show(); 
        target.click(); 
       }.bind(this)); 

       var links = document.querySelectorAll('a'); 
       for (var i = 0, len = links.length; i < len; i++) { 
        links[i].addEventListener('click', function (event) { 
         alert('click on ' + event.target.id); 
        }.bind(this)); 
       } 

      } 
     }; 

    </script> 
</head> 
<body onload="window.app.start();"> 
    <img id="cover" src="http://placehold.it/200x200" /> 
    <a id="a1">link</a> 
    <a id="a2">link</a> 
    <a id="a3">link</a> 
    <a id="a4">link</a> 
    <a id="a4">link</a> 
    <a id="a6">link</a> 
</body> 
</html>

источник

2015-07-09 08:24:06 GibboK

Поместите изображение .png частично поверх (сверху) меню

ответ

Смежные вопросы