在扩展CSS渐变背景 [英] Scaling gradient backgrounds in CSS

问题描述

第一次问，请宽容我

我试图让一个使用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渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！