引导渐变背景错误
问题描述：
我想把渐变放到背景，但发送给我的错误，请帮助，请留下代码： 请，我希望整个屏幕是渐变，但我现在不怎么样，我尝试与多重的东西，但没有什么，我想，该文本是在网页的中间，感谢引导渐变背景错误
.header{
background: -webkit-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* IE10 */
background: -o-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* W3C */
height: 50em;
width: 100%;
}
#letraheader{
font-family: 'Righteous', cursive;
font-size: 5em;
color: aliceblue;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#letraheaerdos{
font-family: 'Grand Hotel', cursive;
font-size: 2em;
color: aliceblue;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>personal</title>
<link rel="stylesheet" href="css/estilos.css">
<!-- fuentes -->
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
<!-- fuentes final -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid header">
<h1 class="col-xs-12" id="letraheader">HOLA</h1>
<h2 class="col-xs-12" id="letraheaerdos"><em>Bienvenidos a mi pagina de presentacion</em></h2>
</header>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答
尝试这个
body{
background: -webkit-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* IE10 */
background: -o-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* W3C */
min-height: 100%;
width: 100%;
}
#letraheader{
font-family: 'Righteous', cursive;
font-size: 5em;
color: aliceblue;
text-align: center;
vertical-align: middle;
}
#letraheaerdos{
font-family: 'Grand Hotel', cursive;
font-size: 2em;
color: aliceblue;
text-align: center;
}
.header{
min-height:100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>personal</title>
<link rel="stylesheet" href="css/estilos.css">
<!-- fuentes -->
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
<!-- fuentes final -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid header">
<h1 class="col-xs-12" id="letraheader">HOLA</h1>
<h2 class="col-xs-12" id="letraheaerdos"><em>Bienvenidos a mi pagina de presentacion</em></h2>
</header>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答
为了使渐变填充整个屏幕，移动渐变CSS到body代替的.header，例如
body {
background: -webkit-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* IE10 */
background: -o-linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #AA076B 10%, #61045F 90%); /* W3C */
}