/ / Elementy html nie nad obrazem tła - html, css, html5, css3

Elementy html nie nad obrazem tła - html, css, html5, css3

Kod: składa się z datalisty z przyciskiem przesyłania po kliknięciu wykonuje niektóre javascript

Chodzi o to, że chciałem wyświetlić datalist i przycisk powyżej obrazu tła (uwaga: zrobiłem bgimage jako responsywny) ale nie wyświetla się powyżej obrazu.

P.S Dint znaczy przezroczysty datalista i przycisk, to, co jest potrzebne, to po prostu obraz bg za moimi elementami HTML. Proszę pomóż...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<img src="/images/bgimage.jpg" width="460" height="345">

<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center align-middle">
<input list="category" name="category" id="textcat" placeholder="Enter your area.." style="width: 300px !important">
<datalist id="category">
<option id="www.google.com" value="fruits" />
<option id="www.fb.com" value="animals" />
<option id="www.ymail.com" value="vechiles" />
<option id="www.msn.com" value="ornaments" />
</datalist>
<input id="btn" type="button" value="submit">
</div>
</div>
</div>

<style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}

#category {
width: 500px !important;
}
</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#btn").click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
var textval = $("#textcat").val();
window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
});
</script>


</body>
</html>

Odpowiedzi:

1 dla odpowiedzi № 1

Spróbuj użyć tego podejścia.

https://jsfiddle.net/pablodarde/fd2cmjqf/

Sztuką jest tutaj utworzenie kontenera z tłem css, a następnie użycie właściwości css "cover-tło".

HTML

    <div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center align-middle">
<input list="category" name="category" id="textcat" placeholder="Enter your area.." style="width: 300px !important">
<datalist id="category">
<option id="www.google.com" value="fruits" />
<option id="www.fb.com" value="animals" />
<option id="www.ymail.com" value="vechiles" />
<option id="www.msn.com" value="ornaments" />
</datalist>
<input id="btn" type="button" value="submit">
</div>
</div>
</div>

CSS

    html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.img-box {
/*position: relative;
width: 100%;
height: 0;*/
}

img {
position: absolute;
width: 100%;
height: auto;
}

.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ae/Castle_Neuschwanstein.jpg");
background-repeat: no-repeat;
background-size: cover;
}

#category {
width: 500px !important;
}

1 dla odpowiedzi nr 2

Znacznie lepiej byłoby użyć elementu w stylu tła

<style>
body {
position:relative;
}
.background {
position:absolute;
top:0; bottom:0; left:0; right:0;
background-size:cover;
background-position:center;
background-image:url(bgimage.jpg);
z-index:-1; // Sets the div"s layer level below everything else
}
</style>

<div class="background"></div>

z-index jest tym, co definiuje warstwy strony. Domyślne dla wszystkiego jest 0, więc ustawiając coś -1 czyni go poniżej każdego innego elementu. Podobnie możesz ustawić swoje .container mieć z-index z 2.

Uważam też, że lepszym sposobem jest posiadanie tła jako własnego elementu, tak aby nie zakłócały one elementów klikalnych poprzez posiadanie własnego indeksu Z, a także mogą mieć własne :after klasy, jak również :hover/:active stany.


1 dla odpowiedzi nr 3

Możesz użyć właściwości background-image w div kontenera.

Twój CSS:

 <style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
#category {
width: 500px !important;
}

ZMIENIONO css:

<style>
.container {
background-image: url("bgimage.jpg");
height: 345px;
width: 460px;
}

#category {
width: 500px !important;
}

</style>

1 dla odpowiedzi nr 4

Możesz dodać obraz jako zdjęcie w tle swojego kontenera zamiast img etykietka:

.container {
background-image: url("bgimage.jpg");
height: 345px;
width: 460px;
}

Wtedy nie byłbyś potrzebny img tag i obraz tła znajduje się za elementami.

Próbny: jsfiddle

I masz również 4 otwarcia div, ale tylko 3 zamknięcia.