Question

我用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("");
    }
}

Answer 1

这是导致你麻烦的规则。

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

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

从html中删除class="full"。而是在页面顶部创建一个新的div或img，其中包含class="full"。然后确保修复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标记，如下所示：

<img class="full"/>

虽然，老实说，在您的网站中使用文本总是更好。由于搜索引擎不将图像索引为文本。所以它不会以这种方式搜索。

在此处了解有关z-index的更多信息：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

整页背景引导程序和超链接

1 个答案: