[英]Linear-gradient as body background
我正在嘗試將身體背景制作為線性漸變，但它不起作用。 但是，當我設置純色時沒關系（例如背景：紅色；）這是一些代碼：
* { 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>
這里有什么問題？
嘗試這個
更多 linear-gradient() 詳情參考下面的鏈接
* { 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>
這段代碼適用於 chrome 和我從未嘗試過的其他瀏覽器
而不是文本十六進制顏色把任何你想要的顏色和逗號你也可以添加更多的顏色
body{
background: linear-gradient(to right, #hex-color, #hex-color)}
嘗試這個
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 */
添加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>
你好，這是我的代碼和工作......
身體上帶有線性漸變的背景圖像未使用 Bootstrap 顯示
[英]Background-image with linear-gradient on body not showing with Bootstrap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.