图像映射背景图像？答案

【问题标题】：Image map a background image?图像映射背景图像？
【发布时间】：2016-04-11 04:35:33
【问题描述】：

我正在为我开发的应用创建网站。网站的背景图片是我在一张桌子上用 iPhone 拍摄的，上面显示了我的应用程序的主屏幕。我想图像映射背景图像，所以当您单击屏幕时，它会将您带到某个地方。我知道如何图像映射，所以我已经使用<img> 标签测试了图像映射。它工作正常；但是，我希望图像具有属性“背景尺寸：封面；”所以它始终填满屏幕并保持纵横比，不留空白。此属性仅适用于背景图片或<div> 标签；不幸的是，您只能在<img> 标签上进行图像映射（我认为）。我已经研究了几个小时。另外，我的图像映射是一个多边形，所以它是独一无二的。感谢您提前提供任何帮助。

【问题讨论】：

您可以使用 SVG，因此用作蒙版或填充的图像和链接将调整大小非常简单的示例 codepen.io/anon/pen/xZRdMq
我刚刚添加了图片。您认为将其转换为 SVG 会影响质量吗？ @GCyrillus
“我希望图像具有属性“背景尺寸：封面；”所以它始终填满屏幕并保持纵横比，不留空白。此属性仅适用于背景图像” – 还有一个替代方案：object-fit
这听起来像它会工作，但由于某种原因它没有效果。我检查了拼写错误，但也许我的浏览器不支持它@CBroe

标签： html css image web

【解决方案1】：

首先，HTML 和 CSS 没有将图像映射缩放到不同大小的原生方式。但是，对此有 Javascript 解决方法。看到这个问题：Responsive image map。

CSS object-fit 属性似乎是缩放图像的最佳选择。但是，在撰写本文时，没有 Internet Explorer 版本（包括 Edge）supports this property。

真的，我认为最好的解决方案是重新考虑您的布局。可能没有办法以一种有效且广泛兼容的方式解决这个问题。

所以，这是我的建议：

从背景图片中移除手机，使其成为一个单独的元素。
使用widely-supported background-size: cover 作为背景图片。
使用未旋转的手机图片，并将<a> 标记绝对定位在图片顶部，以与屏幕或特定 UI 元素对齐。
使用CSS transforms 旋转和缩放手机。浏览器知道如何处理它，并且还会旋转和缩放链接！

下面是这个方法的一个简单例子：http://codepen.io/bvisness/pen/pgrGBr

【讨论】：

【解决方案2】：

以下是<map> 的全局属性，不要认为这是您需要做的工作。

accesskey
class
contenteditable
contextmenu

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

我的一些观察：

不能向标签本身添加宽度和高度值

如果地图标签链接到的图像的宽度和高度发生变化，则地图标签会改变其宽度和高度（参见 sn-p）

无法将自身绝对定位为背景（参见 sn-p）

光标只变为地图左上角的一个链接

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 添加一个 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>

【讨论】：