logo标签列表

如何在背景图片上创建图片映射？

htmlcssimageweb
4
我正在为我开发的应用程序创建一个网站。网站的背景是一张照片，我在照片上用Photoshop放了一台桌子和一个iPhone，iPhone上显示着我的应用程序的主屏幕。我想将背景图像映射，这样当你点击屏幕时，它会带你去某个地方。我知道如何映射图像，因此我已经使用<img>标签测试了图像映射。它工作得很好；然而，我想让图像具有“background-size: cover;”属性，这样它可以在任何时候填充屏幕并保持纵横比，不留下任何空白。这个属性只适用于背景图像或<div>标签；不幸的是，你只能在<img>标签上映射图像（我想）。我已经研究了几个小时了。另外，我的图像映射是一个多边形，因此它是独特的。感谢您提前的任何帮助。
enter image description here
你可以使用SVG作为遮罩或填充，并且链接将完美地调整大小。简单的例子：http://codepen.io/anon/pen/xZRdMq - G-Cyrillus
我刚刚添加了图片。你觉得将它转换成SVG格式会影响质量吗？@GCyrillus - Dylan Hawley
我希望图像具有“background-size：cover;”属性，以便在所有时间内填充屏幕并保持纵横比，不留下任何空白。该属性仅适用于背景图像 - 有一个替代方案：object-fit。 - CBroe
听起来这应该可以工作，但出于某种原因它没有效果。我检查了拼写错误，但也许是我的浏览器不支持@CBroe。 - Dylan Hawley
2个回答
1
首先，HTML和CSS没有本地缩放图像映射到不同大小的方法。但是，有一些JavaScript解决方案可供选择。请参见此问题：响应式图像映射。
CSS object-fit 属性似乎是缩放图像的最佳选择。然而，在撰写本文时，包括Edge在内的任何版本的Internet Explorer都不支持此属性。
实际上，我认为最好的解决方案是重新考虑您的布局。可能没有一种有效且广泛兼容的方式来解决这个问题。
因此，这是我推荐的做法：
  • 将手机从背景图中移除并将其作为单独的元素。
  • 对于背景图片使用广泛支持的background-size: cover。
  • 使用未旋转的手机图像，并绝对定位您的<a>标签在图像上方以与屏幕或特定UI元素对齐。
  • 使用CSS变换来旋转和缩放手机。浏览器知道如何处理这个，并且会同时旋转和缩放链接！

以下是此方法的简单示例：http://codepen.io/bvisness/pen/pgrGBr

0

以下是<map>的全局属性，我认为这并不是你需要完成工作的内容。

accesskey
class
contenteditable
contextmenu

data-*  
dir     
draggable   
dropzone    
hidden  
id  
lang    
spellcheck  
style   
tabindex    
title   
translate

一些我观察到的事情：
  • 无法向标签本身添加宽度和高度值
  • 如果链接到的图像的宽度和高度发生变化，映射标记会改变其宽度和高度（请参见代码片段）
  • 无法将自己作为背景绝对定位（请参见代码片段）
  • 鼠标指针只在地图的左上角变成链接 

    • img {
 border:solid;
width:100% ;
height:100%;
}

map {
position:absolute;
}
    <!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
</map>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRTNx0KWm64q1n3aTNvA6xilTrtDRgTI0wPlxb13mcNn55nahKw"  alt="Planets" usemap="#planetmap">



</body>
</html>

    可能的解决方案：

  • 为body添加背景

  • 使用视口测量来允许body占据整个屏幕（一种方法）

  • 为body添加onclick事件，这样当你点击body时，你将被重定向
    • 代码片段在此处

    body{
  position:relative;
  background:url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQfqyqPka3zuGaR9sVDXDcfHMyNrLQnz3QFkaXcWCc8WX_S_14R");
  background-size:cover;
  border:solid;
  display:block;

  margin:auto;
  width:100wh;
  height:100vh;
  cursor:pointer
}

#full_blown{
  width:100wh;
  height:100vh;
}
    <body onclick="location.href='www.google.com'"></body>
<h1>THIS IS SOME </h1>
<p>
There was a cow called boy
</p>

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接