Je voudrais utiliser du texte dynamique comme arrière-plan de certains éléments dans ma balise. Pour cela, je peux utiliser des images (texte dynamique). Comment puis-je le faire avec seulement CSS ou JavaScript ?
Réponses
Trop de publicités?
snm-yah
Points
2067
Utilisation de CSS purs :
(Mais ne l'utilisez qu'en de rares occasions, car La méthode HTML est PREFEREE ).
.container{
position:relative;
}
.container::before{
content:"";
width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1; top: 0; left: 0;
background: black;
}
.container::after{
content: "Your Text"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; font-size: 2em; color: red; text-align: center; text-shadow: 0px 0px 5px black; background: #0a0a0a8c; padding: 5px;
animation-name: blinking;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
<div class="container">here is main content, text , <br/> images and other page details</div>
JHM16
Points
319
J'espère que cela pourra vous aider
<!DOCTYPE html>
<html>
<head>
<style>
:root:after {
content: "Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark ";
position: fixed;
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
color: rgb(187, 182, 182);
top:0;
z-index: -1;
}
</style>
</head>
<body>
<p>hey my name is JHM</p>
</body>
</html>
meder
Points
81864
Vous pouvez faire en sorte que l'élément contenant le texte de fond ait un ordre d'empilement inférieur ( z-index, position ) et peut-être même définir l'opacité. Ainsi, l'élément dont vous avez besoin en haut doit avoir un ordre d'empilement plus élevé ( z-index:5 ; position:relative ; par exemple ) et l'élément derrière doit avoir un ordre inférieur ( par défaut ou juste un z-index inférieur comme 3 et position:relative ; ).
Piotr
Points
1
Une solution simple :
background-text{
font-size:30px;
font-weight:900;
color:#f1f1f1;
position:absolute;
z-index:-1;
}
<div id="container">
<background-text> This is background</background-text>
This if foreground text
</div>Vous n'avez pas vraiment besoin de définir "position:relative" pour le conteneur, sauf si vous devez définir une position relative pour l'arrière-plan.
- Réponses précédentes
- Plus de réponses
