HTML/CSS kann nicht ein klebriges Element sein?

Ich versuche ein Bild zu erstellen, das ein klebriges Element ist. Wenn ich jedoch versuche, es zum Laufen zu bringen, folgt es diesen Regeln einfach nicht. Die sticky -Eigenschaft funktioniert für jedes andere Element auf der Seite, daher bin ich mir nicht sicher, was passiert. Jede Hilfe wäre willkommen.HTML/CSS kann nicht ein klebriges Element sein?

HTML -

<HTML> 
<head> 
    <title> Stunning Web Design </title> 
    <link rel = 'stylesheet' type = "text/css" href = "main.css"> 
    <div id = "fonts"> 
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 
    </div> 
</head> 
<body> 
    <div id = "images"> 
    <img id = "fall_bridge" src = "Photos/fall_bridge.jpg" alt = "Beautiful Paris Photo" width = 1482 height = 720> 
    </div> 
    <p id = 'backPlate'> </p> 
    <h1 id = "mainTitle"> Stunning Web Design </h1> 
</body>

Meine CSS -

#fall_bridge { 
    position: -webkit-sticky; /* safari enabled */ 
    position: sticky; 
    top: 0; 
    border: 5px solid white; 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 

} 

#mainTitle { 
    border: 8px double white; 
    background-color: rgba(148, 149, 153, .8); 
    width: 680px; 
    padding: 10px 10px; 
    position: relative; 
    bottom: 1100px; 
    left: 380px; 
    color: white; 
    font-family: 'Cabin', sans-serif; 
    font-size: 100px; 
    text-align: center; 
} 

img { 


} 

#backPlate { 
    position: relative; 
    border: 1px solid black; 
    width: 1488px; 
    height: 500px; 
}

Quelle

2017-12-06 jonah_johnson

Die umgebende div #images ist es zu beeinflussen. Wenn Sie die klebrigen Eigenschaften auf #images anstelle von #fall_bridge anwenden, sollte es funktionieren (wenn das Ihr gewünschtes Ergebnis ist).

Ein bisschen Off-Topic, aber ich habe bemerkt, dass Sie Ihre Web-Fonts in Ihrem Kopf innerhalb eines Div haben? Irgendein Grund dafür? Divs sollten nicht in Ihrem head Tag sein.

Quelle

2017-12-06 16:03:18

ich viele Schriftarten vom Ende haben werde, so brauche ich ein DIV, sonst verrückt, es wird bekommen –

Ich bin nicht sicher, wie man sie in einem DIV setzen wird einen Unterschied machen? Alle Webfonts, die in Ihrem head-Tag aufgelistet sind, werden in die Seite hineingezogen/geladen, wenn Sie sie in ein DIV einbinden, ändert sich nichts. DIVs sind normalerweise für das Seitenlayout im Körper. Die Schriftarten werden im Hintergrund für die Verwendung auf der Seite und nicht auf einer Position auf der Seite geladen. Während sie in einigen Browsern rendern können, glaube ich nicht, dass es ein DIV-Tag in dem HEAD-Tag gültig ist. –

Es war nicht klebrig wegen der <div id="images"> Umgebung. Entweder machen Sie das div Sticky oder das Bild. Wenn du das Bild klebrig machen willst, entferne das div.

#fall_bridge { 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 5px; 
 
    border: 5px solid black; 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
} 
 

 
#mainTitle { 
 
    border: 8px double white; 
 
    background-color: rgba(148, 149, 153, .8); 
 
    width: 680px; 
 
    padding: 10px 10px; 
 
    position: relative; 
 
    bottom: 1100px; 
 
    left: 380px; 
 
    color: white; 
 
    font-family: 'Cabin', sans-serif; 
 
    font-size: 100px; 
 
    text-align: center; 
 
} 
 

 

 
#backPlate { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    width: 1488px; 
 
    height: 500px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 
 
    <img id="fall_bridge" src="https://images.fineartamerica.com/images-medium-large/fall-bridge-hala-eliya.jpg" alt="Beautiful Paris Photo" width="500px"> 
 
<p id='backPlate'> </p> 
 
<h1 id="mainTitle"> Stunning Web Design </h1>

Quelle

2017-12-06 16:11:12

HTML/CSS kann nicht ein klebriges Element sein?

Antwort

Verwandte Themen