Question

我试图将身体背景设为线性渐变，但它不起作用。但是，当我设置纯色时，它没问题（例如背景：红色;）以下是一些代码：

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  /* background: red;*/
  background: linear-gradient(#648880, #293f50);
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

#chatbox {
  background: DarkKhaki;
  padding: 10px;
  width: 400px;
  height: 200px;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

#user_msg {
  font: 24px Tahoma;
  position: absolute;
  bottom: 10px;
  width: 300px;
  height: 30px;
}

#send_button {
  height: 30px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#chatbox {
  border: 1px solid gray;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>

<body>

  <div id="chatbox">
    <div id="msgs">
      Ai says:<br> You say:
    </div>
    <form>
      <input id="user_msg" type="text">
      <input id="send_button" type="submit" value="send">
    </form>
  </div>
</body>

这里有什么问题？

Answer 1

试试这个

 background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */

Answer 2

添加html{ height:100%;}

*{
  margin: 0;
  padding:0;
}
html{
  height:100%;
}
body{
    width: 100%;
    height: 100%;
    /* background: red;*/
   background: #648880; /* Old browsers */
background: -moz-linear-gradient(top, #648880 0%, #293f50 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #648880 0%,#293f50 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #648880 0%,#293f50 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#648880', endColorstr='#293f50',GradientType=0 );
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
#chatbox{
    background: DarkKhaki;
    padding: 10px;
    width: 400px;
    height: 200px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
#user_msg{
    font: 24px Tahoma;
    position: absolute;
    bottom: 10px;
    width: 300px;
    height: 30px;
}
#send_button{      
    height: 30px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#chatbox{
    border: 1px solid gray;
}

<div id="chatbox">
    <div id="msgs">
        Ai says:<br>
        You say:
    </div>
<form>
    <input id="user_msg" type="text">
    <input id="send_button" type="submit" value="send">
</form>
</div>

Answer 3

试一下

更多线性渐变（）详情请参阅下面的链接

<强> Link-1

<强> Link-2

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

body {
  width: 100%;
  height: 100%;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#648880, #293f50);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#648880, #293f50);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#648880, #293f50);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#648880, #293f50);
  /* Standard syntax (must be last) */
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

#chatbox {
  background: DarkKhaki;
  padding: 10px;
  width: 400px;
  height: 200px;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

#user_msg {
  font: 24px Tahoma;
  position: absolute;
  bottom: 10px;
  width: 300px;
  height: 30px;
}

#send_button {
  height: 30px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#chatbox {
  border: 1px solid gray;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>

<body>

  <div id="chatbox">
    <div id="msgs">
      Ai says:<br> You say:
    </div>
    <form>
      <input id="user_msg" type="text">
      <input id="send_button" type="submit" value="send">
    </form>
  </div>
</body>

Answer 4

此代码在 chrome 和我从未尝试过的其他浏览器上完美运行

不是文本十六进制颜色，而是将您想要的任何颜色放在那里，您还可以通过逗号添加更多颜色

body{
background: linear-gradient(to right, #hex-color, #hex-color)}

线性渐变作为身体背景

4 个答案: