问题描述
第一次问,请宽容我
我试图让一个使用jQuery Mobile的网络应用程序的背景渐变。我无能CSS和UI设计一般。
我想渐变填充整个页面的空间。现在,它填补了原来的窗口的大小,但向下滚动时切断。
大多数建议指向这一点:
HTML
{
高度:100%;
}
...这并不为我工作。以下是我有:
内容:;
宽度:100%;
高度:100%;
浮动:左;
位置:相对;
的z-index:-1;
顶部:0;
左:0;
背景重复:不重复;
背景附件:固定;
背景:-moz-线性渐变(-45deg,RGBA(0,0,0,1)的40%,RGBA(0,0,0,0.5)100%)固定;
背景:-webkit-梯度(线性,左上角,右下角,颜色停止(0%,RGBA(0,0,0,1)),彩站(100%,RGBA(0,0,0,0.5 )))固定;
背景:-webkit-线性渐变(-45deg,RGBA(0,0,0,1)的40%,RGBA(0,0,0,0.5)100%)固定;
背景:-o-线性渐变(-45deg,RGBA(0,0,0,1)的40%,RGBA(0,0,0,0.5)100%)固定;背景:-ms线性梯度(-45deg,RGBA(0,0,0,1)的40%,RGBA(0,0,0,0.5)100%)固定;
背景:线性渐变(135deg,RGBA(0,0,0,1)的40%,RGBA(0,0,0,0.5)100%)固定;
过滤:进程id:DXImageTransform.Microsoft.gradient(startColorstr ='#a6000000',endColorstr =#00000000,GradientType = 1); / * IE6-9后备上水平梯度* /
有时会发生此问题,当您使用高度:100%;
。因为这意味着,以填补在浏览器窗口的100%,但它不能填满其余因为那将是过去的100%。
尝试调整它有点像这样写的:
HTML
{
最小高度:100%;
}
现在它可以填补过去的100%,所以它应该填充背景的其余部分。
first time asking, please go easy on me
I'm trying to make a background gradient for a web app that uses JQuery Mobile. I'm clueless about CSS and UI design in general.
I want the gradient to fill the entire page's space. Right now, it fills up to the original window's size, but "cuts off" when scrolling down.
Most suggestions point to this:
html
{
height: 100%;
}
...which doesn't work for me. Here is what I have:
content: " ";
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: -1;
top: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 100%) fixed;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.5))) fixed;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%)fixed;
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed; background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
background: linear-gradient(135deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
This problem happens sometimes when you use height:100%;
. Since it means to fill 100% of the browser window, it doesn't fill the rest because that would be past 100%.
Try tweaking it a little and writing it like this:
html
{
min-height: 100%;
}
Now it can fill past 100% so it should fill the rest of the background.
这篇关于在扩展CSS渐变背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!