Quelques conseils sur le CSS
1. Centré verticalement, centré horizontalement
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.inner {
position: absolute;
top: 50%;
/* left: 50%; */
-webkit-transform: translateY(-50%);
-o-transform: translateY(-200px);
transform: translateY(-50%);
/* -webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); */
width: 200px;
height: 200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outer {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
/* -webkit-transform: translateY(-50%);
-o-transform: translateY(-200px);
transform: translateY(-50%); */
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Notez que cette méthode ne peut pas être utilisée simultanément horizontalement et verticalement. Le centrage écrasera.
Si vous souhaitez centrer à la fois horizontalement et verticalement, vous pouvez considérer la disposition en grille, qui est très puissante.Vous pouvez lire mon autre article.
disposition de la grille
2. Animation de dégradé d'arrière-plan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.liner {
width: 500px;
height: 100px;
margin: 0 auto;
background-image: linear-gradient(green,yellow);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 1s;
}
.liner:hover {
background-position: 0 0;
}
</style>
</head>
<body>
<div class="liner"></div>
</body>
</html>
Dans l'image initiale, la
souris passe
et passe à une autre apparence en moins d'une seconde, ce qui donne aux gens un aspect animé.
Troisièmement, créez un texte flou
Utilisez la couleur: transparent et l'ombre du texte: 0 0 5px rgba (0,0,0,0.8);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blur {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* .text {
background-image: url(images/banner5.jpg);
background-size: 100% 100%;
filter: blur(2px);
} */
</style>
</head>
<body>
<div class="blur">
哈哈哈哈哈哈哈
<!-- <div class="text">哈哈哈哈哈哈哈</div> -->
</div>
</body>
</html>
Laisser l'image et le texte flous ensemble.
Premièrement, l'effet
de flou n'est pas ajouté. Le traitement du flou est ajouté.
Utilisez le filtre: flou (2px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.blur {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
/* color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.8); */
color: #333;
}
.text {
background-image: url(images/banner5.jpg);
background-size: 100% 100%;
filter: blur(2px);
}
</style>
</head>
<body>
<div class="blur">
<!-- 哈哈哈哈哈哈哈 -->
<div class="text">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>
