Css 将.png图像部分放置在菜单上方(顶部)

Css 将.png图像部分放置在菜单上方(顶部),css,Css,我有一个手风琴菜单,我已经调整,以满足我的需要。我的最后一个绊脚石是,我有一张联邦快递的图片(见附件),我需要放在菜单顶部,但仍然允许用户点击它来激活(访问)手风琴菜单。该图像是一个单独的图像,设置为在Photoshop中创建的所需alpha。这个文件只是一个快照,如果它是我想要的样子,它会是什么样子 如果这是可能的话,我会使用什么代码,我会把它放在哪里?如果在CSS文件中,它在哪里,在哪几行之间 您可以应用css: pointer-events: none; 到链接上方的图像 请参见fid

我有一个手风琴菜单,我已经调整,以满足我的需要。我的最后一个绊脚石是,我有一张联邦快递的图片(见附件),我需要放在菜单顶部,但仍然允许用户点击它来激活(访问)手风琴菜单。该图像是一个单独的图像,设置为在Photoshop中创建的所需alpha。这个文件只是一个快照,如果它是我想要的样子,它会是什么样子

如果这是可能的话,我会使用什么代码,我会把它放在哪里?如果在CSS文件中,它在哪里,在哪几行之间

您可以应用css:

pointer-events: none;
到链接上方的图像

请参见fiddle,您可以应用css:

pointer-events: none;
到链接上方的图像


请参阅fiddle指针事件:无是一个合适的解决方案

或者,您可以使用兼容IE>5.5的

以下技巧允许您在不使用
指针事件的情况下选择封面下的图像:无

说明:

  • 点击封面图片
  • 暂时隐藏封面图像
  • 获取鼠标坐标
  • 在鼠标坐标下获取HTML元素(这样您就知道封面下的内容)
  • 触发该HTML元素上的click事件
  • 再次显示封面图像
您的问题的另一个替代解决方案(不包括任何JS)是:

  • 在PhotoShop中按照菜单中应该显示的内容修剪图像。对其使用CSS背景图像属性
  • 仅将courier FedEx图像用作页面正文的CSS背景图像
您可以仅使用CSS实现相同的视觉效果



试验
img{
位置:绝对位置;
排名:0;
左:0;
不透明度:0.4;
}
a{
显示:块;
宽度:300px;
高度:20px;
背景颜色:绿黄色;
}
a:悬停{
背景色:#FF0000;
}
window.app={
显示:函数(){
document.getElementById('cover').style.display='';
},
隐藏:函数(){
document.getElementById('cover').style.display='none';
},
事件:null,
开始:函数(){
document.getElementById('cover')。addEventListener('click',函数(事件){
this.hide();
this.event=事件;
var target=document.elementFromPoint(event.pageX,event.pageY);
this.show();
target.click();
}.约束(这个);
var links=document.querySelectorAll('a');
对于(变量i=0,len=links.length;i
指针事件:无是一个合适的解决方案

或者,您可以使用兼容IE>5.5的

以下技巧允许您在不使用
指针事件的情况下选择封面下的图像:无

说明:

  • 点击封面图片
  • 暂时隐藏封面图像
  • 获取鼠标坐标
  • 在鼠标坐标下获取HTML元素(这样您就知道封面下的内容)
  • 触发该HTML元素上的click事件
  • 再次显示封面图像
您的问题的另一个替代解决方案(不包括任何JS)是:

  • 在PhotoShop中按照菜单中应该显示的内容修剪图像。对其使用CSS背景图像属性
  • 仅将courier FedEx图像用作页面正文的CSS背景图像
您可以仅使用CSS实现相同的视觉效果



试验
img{
位置:绝对位置;
排名:0;
左:0;
不透明度:0.4;
}
a{
显示:块;
宽度:300px;
高度:20px;
背景颜色:绿黄色;
}
a:悬停{
背景色:#FF0000;
}
window.app={
显示:函数(){
document.getElementById('cover').style.display='';
},
隐藏:函数(){
document.getElementById('cover').style.display='none';
},
事件:null,
开始:函数(){
document.getElementById('cover')。addEventListener('click',函数(事件){
this.hide();
this.event=事件;
var target=document.elementFromPoint(event.pageX,event.pageY);
this.show();
target.click();
}.约束(这个);
var links=document.querySelectorAll('a');
对于(变量i=0,len=links.length;i
您需要在代码段中显示您尝试过的内容和现有代码。要回答“放在哪里”,我们需要指向您的代码并说“在这里”,对吗?您是否已经构建了这些功能,或者您正在寻找指南?代码将不胜感激。你想做的是b