Question

我想将渐变放到背景中，但是发送错误，请帮助，请保留代码：拜托，我希望整个屏幕都是渐变，但我现在不怎么样，我尝试多种东西，但没有，我希望文本在网页中间，谢谢

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

要使渐变填充整个屏幕，请将渐变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 */
}

Answer 2

试一下

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>

bootstrap渐变背景错误

2 个答案: