Tengo un elemento div, que tiene una imagen de fondo centrada en él. Quiero que se coloque un elemento h2 o p (fijo o absolutamente, no estoy seguro de cuál es el correcto) encima de ese elemento div, pero sin superponerlo. Debería tener el mismo margen inferior incluso cuando se cambia el tamaño de la ventana. Ya intenté poner un texto interno dentro del div con la imagen de fondo. Agregué la imagen así:
<div>
<!-- other elements -->
<div class="v-container visible default background-image">
</div>
y en css:
.v-container {
background-color: #e9e9e9;
text-align: center;
font-family: cursive;
}
.default {
background-color: rgba(0, 0, 0, 0.103);
width: 100%;
height: 100%;
pointer-events: none;
}
.background-image {
background-image: url('../graphics/Note.png');
background-position: center;
background-repeat: no-repeat;
}
¿Por qué etiquetó su pregunta con Electron?
-Alain BUFERNE
21 de marzo de 2021 a las 13:43
Lo etiqueté como Electron porque estoy desarrollando una aplicación Electron js usando HTML, CSS y Javascript.
- Noé
25/03/2021 a las 21:20
------------------------------------
Traté durante algún tiempo de resolver mi problema y creo que obtuve una respuesta a mi pregunta. Bueno, no es exactamente la respuesta que necesito, pero le dio al elemento sobre la imagen un espacio constante entre la imagen y la parte superior de su contenido principal.ejem. Logré esto usando el atributo CSS top: x% y bottom: -x%. Donde x representa el porcentaje deseado. Por ejemplo, arriba: 15% y abajo: -15% lograron lo mismo. No estoy seguro de por qué tuve que usar el signo '-' mientras usaba el atributo inferior, pero funciona. Código de muestra a continuación de cómo logré esto:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NoteBook 2.0</title>
<link rel="stylesheet" href="../styles/photon.css">
<link rel="stylesheet" href="../styles/main.css">
<script src="../UI/renderer.js" async defer></script>
</head>
<body>
<div class="invisible default v-container">
<h4>Tap a note on the left to view here</h4>
<h5>Or Tap the
<span class="icon icon-book"></span> icon at the left to add new note
</h5>
<img src="../graphics/Hand_note.png" alt="Note icon">
</div>
</body>
</html>
La hoja de estilo (CSS)
html, body {
width: 100%;
height: 100%;
}
.v-container {
background-color: #e9e9e9;
text-align: center;
}
.v-container :first-child {
position: relative;
top: 15%;
}
.v-container :nth-child(2) {
position: relative;
top: 15%;
}
.v-container :last-child {
position: relative;
top: 20%;
}
Y el resultado:
Desde la imagen, parece normal, pero cuando cambia el tamaño de la ventana, la imagen aún mantiene un espacio constante con otros elementos. El texto en la parte superior siempre permanece al 15% de su elemento principal porque su posición se estableció en relativa. El elemento de texto debajo del primer elemento secundario también tiene un 15% establecido (supongo que lo que significa es que, debido a que la posición también se estableció en relativa, todavía sigue el oder en qué elementos secundarios aparecen en el contenedor principal.
------------------------------------
¿Puedes publicar tu código?
Si usó explícitamente una imagen como fondo de un div, entonces centrar el elemento será relativo al div mismo y probablemente nunca se alineará con la imagen de fondo a menos que la relación de aspecto sea perfecta.
Una solución podría ser crear un div secundario anidado y configurar sus márgenes en relación con el principal.
O podrías configurar la imagen como un elemento en lugar del fondo, esto haría que fuera mucho más fácil hacer referencia a ella.
Sería más fácil ayudarte si pudiera ver tu bacalao.e.
Compartir
mejorar esta respuesta
Seguir
Respondido
19 de marzo de 2021 a las 16:17
BagelByte
BagelByte
1
2
Esto es más un comentario que una respuesta.ejem.
- Jamin
20/03/2021 a las 22:41
Apenas pude entender lo que dijo @BagelByte en su supuesta respuesta.
- Noé
25/03/2021 a las 21:21
