整页背景引导和超链接

我从3张图片构建了一个没有内容的网页，当它移动时，我只使用一个专门用于移动设备并具有引导整页背景的网页，它看起来非常好。问题是，当我尝试制作一个超级链接，它有点像图像映射，但我认为它更容易，它没有在移动设备上显示的问题，我不知道为什么。这里是代码，请帮忙整页背景引导和超链接

<!DOCTYPE html> 
<html class="full" lang="en"> 
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. --> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>The Big Picture - Start Bootstrap Template</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/the-big-picture.css" usemap="#entermap" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <img class="img-responsive myheader"> 


    <img class="img-responsive myfooter"> 
    <a href="waze://?ll=<35.1768493>,<32.9496625>&navigate=yes" title="" style="position: absolute; left: 13.47%; top: 91.75%; width: 73.47%; height: 6.49%; z-index: 2;"></a> 
    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 
    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 
</body> 

</html> 

/*! 
* Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com) 
* Code licensed under the Apache License v2.0. 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
*/ 

body { 
    margin-top: 50px; 
    margin-bottom: 50px; 
    background: none; 
} 

.full { 
    background: url("DSC_5703final.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
@media (max-width: 1000px){ 
    .full { 
     background-size: cover; 
     top: 0; 
     left: 0; 
    /* Preserve aspet ratio */ 
    min-width: 100%; 
    min-height: 100%; } 
} 

.myheader{ 
    content:url("Untitled-1-01.png"); 
    position: fixed; 
    z-index: 9999; 
    top: 0; 
    width: 100%; 
    height: auto; 
} 

.myfooter{ 
    content:url("Untitled-1-02.png"); 
    position: fixed; 
    bottom: 0; 
    margin: 0 auto; 
    overflow: hidden; 
} 


@media screen and (max-width: 480px){ 
    .full{ 
     content:url("bgad.jpg"); 
     width: 100%; 
     background-size: contain; 

    } 
    .myfooter{ 
     content:url(""); 
    } 
    .myheader{ 
     content:url(""); 
    } 
}

来源

2016-06-09 ssabin

你在链接到Waze的底部reffering到薄带？你是说它在普通浏览器上显示，但不在移动浏览器中显示？ – yosefrow

是的，它不会出现在手机上 – ssabin

这可能是由于你使用的百分比为高度 – yosefrow

这是造成你麻烦的规则。

@media screen and (max-width: 480px){ 
    .full{ 
     content:url("bgad.jpg"); 
     /* width: 100%; */ 
     /* background-size: contain; */ 
    }

您正在使用的内容完全填充图像的HTML。 z-index在这里不会帮助你，因为孩子们会继承父母的z-索引。由于您正在将此规则应用于html标记，因此除非您在广告的html内制作单独的容器并将其分配给.full类，否则无法覆盖它。然后让你的地图区域具有更高的z-index。那么新容器可以覆盖另一个容器，只要它们具有不是静态的position的设置即可。即相对，绝对

从html中删除class="full"。取而代之的是在页面顶部使用class="full"制作新的div或img。然后确保修复z-index，使其高于其他所有值。

例如，您可以尝试修改现有的规则是这样的：

@media screen and (max-width: 480px){ 
    .full{ 
     content:url("bgad.jpg"); 
     /* width: 100%; */ 
     /* background-size: contain; */ 
     position: absolute; 
     top: 0; 
     z-index: 10; 
    }

，并将其应用到img标签，像这样：

虽然，说实话它始终是更好地在你的网站上使用文字。由于搜索引擎不会将图像索引为文本。所以它不会以这种方式搜索。

了解更多有关z-index的位置：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

来源

2016-06-09 21:15:10 yosefrow

整页背景引导和超链接

回答

相关问题