Ganzseitige Hintergrund Bootstrap und Hyperlink

Ich baute ein Web von 3 Bildern ohne Inhalt und wenn es mobil geht, ich benutze nur eine, die für mobile und mit bootstrap ganze Seite Hintergrund entwickelt wird, sieht es sehr gut aus. Das Problem ist, wenn ich versuche, einen Hyperlink zu machen, der eine Art Bildkarte ist, aber ich denke, es ist einfacher, das Problem, dass es nicht auf Handy zeigt und ich weiß nicht warum. hier ist der Code, bitteGanzseitige Hintergrund Bootstrap und Hyperlink

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

Quelle

2016-06-09 ssabin

Sind Sie an der Unterseite der dünnen Streifen reffering, die Waze-Links? Sagen Sie, dass es in einem normalen Browser angezeigt wird, aber nicht im mobilen Browser? – yosefrow

ja es wird nicht auf Handy – ssabin

Dies kann aufgrund der Tatsache sein, dass Sie Prozentsätze für Höhe verwenden – yosefrow

Dies ist die Regel helfen, die Sie Probleme verursacht.

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

Sie verwenden Inhalt, um den HTML-Code vollständig mit einem Bild zu füllen. Z-Index wird Ihnen hier nicht helfen, weil Kinder den Z-Index ihrer Eltern erben. Da Sie diese Regel auf das HTML-Tag anwenden, können Sie nichts außer Kraft setzen, es sei denn, Sie erstellen einen separaten Container innerhalb des HTML-Codes für Ihre Anzeige und weisen ihr die Klasse .full zu. Dann sollte Ihr Kartenbereich einen höheren Z-Index haben. dann kann der neue Container den anderen Container überschreiben, solange sie eine Einstellung für position haben, die nicht statisch ist. d. h. relativ, absolut

Entfernen Sie class="full" von HTML. Erstellen Sie stattdessen ein neues div oder img mit einem class="full" am Anfang der Seite. Stellen Sie dann sicher, dass der Z-Index so korrigiert wird, dass er höher ist als alle anderen.

Zum Beispiel können Sie versuchen, Ihre bestehende Regel wie folgt zu ändern:

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

und es auf einen img-Tag wie so:

Obwohl, um ehrlich zu sein ist es immer besser, Verwenden Sie Text in Ihrer Website. Da Suchmaschinen die Bilder nicht als Text indizieren. Es wird also nicht auf diese Weise durchsuchbar sein.

hier mehr über Z-Index Finden Sie heraus: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Quelle

2016-06-09 21:15:10 yosefrow

Ganzseitige Hintergrund Bootstrap und Hyperlink

Antwort

Verwandte Themen