Wie bindet man ein Element an das Hintergrundbild (responsive)?

Ist es möglich, (HTML) -Elemente an ein Hintergrundbild eines Elternelements zu binden? Im folgenden Beispielcode möchte ich, dass die (Hover) -Elemente immer auf den Blöcken bleiben, auch wenn das Fenster auf einen kleinen (mobilen) Bildschirm verkleinert wird.Wie bindet man ein Element an das Hintergrundbild (responsive)?

.steps { 
 
    background: url(https://i.gyazo.com/c027c7cefa8f66fb10135547ac650d24.png) center no-repeat; 
 
    background-size: contain; 
 
    height: 95px; 
 
} 
 
.steps ul { 
 
    /* margin-top: 0; */ 
 
    /* margin-left: -246px; */ 
 
    margin-left: -286px; 
 
    left: 50%; 
 
    top: 0%; 
 
    margin-top: 13px; 
 
    position: absolute; 
 
} 
 
.steps ul li { 
 
    display: inline-block; 
 
    margin: 0 2px; 
 
} 
 
.steps ul li a { 
 
    display: block; 
 
    height: 82px; 
 
    width: 116px; 
 
    /*margin-bottom: 22px;*/ 
 
    text-indent: -9999em; 
 
} 
 
.steps ul li a:hover { 
 
    background: rgba(255, 255, 255, 0.25); 
 
}

<div class="steps"> 
 
    <ul class="list-unstyled"> 
 
    <li> 
 
     <a href="#">Block 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Block 2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Block 3</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Block 4</a> 
 
    </li> 
 
    </ul> 
 
</div>

JSFiddle

Das Problem, das jetzt geschieht, dass die Blöcke in-line nicht bleiben. Ich dachte daran, ein Eltern-Container-Element um all dies zu legen, aber das wird dazu führen, dass das Bild dann nicht mehr zentriert wird.

Kann mir jemand dazu einen Rat geben?

Quelle

2016-05-30 Barrosy

es wäre einfacher zu manipulieren, wenn Sie für jeden Schritt ein separates Bild/Hintergrund festlegen .. nicht so in einem Bild – jakob

@jakob Sie haben Recht und ich stimme zu, es wäre einfacher, diese Art von Sachen zu manipulieren so (und es wäre am geeignetsten/richtig, es so zu machen). Das Problem ist, dass ich nur dieses Hintergrundbild habe und damit arbeiten sollte. Irgendwie scheint es in einem alten Stück Code gut zu funktionieren, aber wenn ich Dinge in Bootstrap setze, muss ich verschiedene Bildschirmbreiten verwenden, was bedeutet, dass ich viel neu positionieren muss. – Barrosy

Ich merke, dass Sie verwenden:

Position: absolut;

Absolute Positionierung ist keine Technik, die für reaktionsfähiges Design geeignet ist. Beim Responsive Design würden Sie normalerweise Einheiten mit relativer Größe wie ems verwenden und relative Positionierungsmethoden anstelle von absoluten verwenden. Ich würde sagen, Sie müssen Ihre Konstruktionstechnik überdenken, um relative Größe und relative Positionierung zu verwenden.

Quelle

2016-05-30 10:21:08 Atrix

Dies ist eher ein Kommentar als eine Antwort auf das Problem (oder die Frage). – Barrosy

Wie bindet man ein Element an das Hintergrundbild (responsive)?

Antwort

Verwandte Themen