CSS 设置在身体上的 CSS3 渐变背景不会拉伸而是重复？

Question

提问by JD Isaacks

ok say the content inside the <body>totals 300px high.

好的说里面的内容<body>总计 300px 高。

If I set the background of my <body>using -webkit-gradientor -moz-linear-gradient

如果我设置我<body>使用的背景-webkit-gradient或-moz-linear-gradient

Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.

然后我最大化我的窗口（或者只是让它高于 300 像素）渐变将正好是 300 像素高（内容的高度），然后重复以填充窗口的其余部分。

I am assuming this is not a bug since it is the same in both webkit and gecko.

我假设这不是错误，因为它在 webkit 和 gecko 中都是相同的。

But is there a way to make the gradient stretch to fill the window instead of repeat?

但是有没有办法让渐变拉伸以填充窗口而不是重复？

Answer 1

回答by Bryan Downing

Apply the following CSS:

应用以下 CSS：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit:Added margin: 0;to body declaration per comments (Martin).

编辑：添加margin: 0;到每个评论（Martin）的正文声明中。

Edit:Added background-attachment: fixed;to body declaration per comments (Johe Green).

编辑：添加background-attachment: fixed;到每个评论的正文声明（Johe Green）。

Answer 2

回答by Joshua Rudd

Regarding a previous answer, setting htmland bodyto height: 100%doesn't seem to work if the content needs to scroll. Adding fixedto the background seems to fix that - no need for height: 100%;

关于以前的答案，如果内容需要滚动，则设置html和bodytoheight: 100%似乎不起作用。添加fixed到背景似乎可以解决这个问题 - 不need for height: 100%;

E.g.:

例如：

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Answer 3

回答by Ricardo Zea

I know I'm late to the party, but here's a more solid answer.

我知道我参加聚会迟到了，但这里有一个更可靠的答案。

All you need to do is use min-height: 100%;rather than height: 100%;and your gradient background will extend the entire height of the viewport without repeating, even if the content is scrollable.

你需要做的就是使用min-height: 100%;而不是height: 100%;你的渐变背景将扩展视口的整个高度而不重复，即使内容是可滚动的。

Like this:

像这样：

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

Answer 4

回答by John Sanford

Here's what I did to solve this problem... it will show the gradient for the full length of the content, then simply fallback to the background color (normally the last color in the gradient).

这是我为解决这个问题所做的......它将显示内容全长的渐变，然后简单地回退到背景颜色（通常是渐变中的最后一个颜色）。

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

I've tested this in FireFox 3.6, Safari 4, and Chrome, I keep the background-color in the body for any browsers that for some reason don't support styling the HTML tag.

我已经在 FireFox 3.6、Safari 4 和 Chrome 中对此进行了测试，对于由于某种原因不支持 HTML 标签样式的任何浏览器，我都将背景颜色保留在正文中。

Answer 5

回答by Justin Force

Setting html { height: 100%}can wreak havoc with IE. Here's an example (png).But you know what works great? Just set your background on the <html>tag.

设置html { height: 100%}可能会对 IE 造成严重破坏。这是一个例子（png）。但是你知道什么是最有效的吗？只需在<html>标签上设置背景即可。

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Background extends to the bottom and no weird scrolling behavior occurs. You can skip all of the other fixes. And this is broadly supported. I haven't found a browser that doesn't let you apply a background to the html tag. It's perfectly valid CSS and has been for a while. :)

背景延伸到底部，不会发生奇怪的滚动行为。您可以跳过所有其他修复。这得到了广泛的支持。我还没有找到不允许您将背景应用到 html 标签的浏览器。它是完全有效的 CSS 并且已经有一段时间了。:)

Answer 6

回答by Rick Smith

There is a lot of partial information on this page, but not a complete one. Here is what I do:

这个页面有很多部分信息，但不是完整的。这是我所做的：

Create a gradient here: http://www.colorzilla.com/gradient-editor/
Set gradient on HTML instead of BODY.
Fix the background on HTML with "background-attachment: fixed;"
Turn off the top and bottom margins on BODY
(optional) I usually create a <DIV id='container'>that I put all of my content in

在此处创建渐变：http: //www.colorzilla.com/gradient-editor/
在 HTML 而不是 BODY 上设置渐变。
使用“background-attachment: fixed;”修复 HTML 上的背景；
关闭 BODY 上的顶部和底部边距
（可选）我通常会创建一个<DIV id='container'>我将所有内容放入的

Here is an example:

下面是一个例子：

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

This has been tested with IE, Chrome, and Firefox on pages of various sizes and scrolling needs.

这已经在 IE、Chrome 和 Firefox 上在各种大小和滚动需求的页面上进行了测试。

Answer 7

回答by subv3rsion

Dirty; maybe could you just add a min-height: 100%; to the html, and body tags? That or at least set a default background color that is the end gradient color as well.

肮脏的; 也许你可以添加一个 min-height: 100%; 到 html 和 body 标签？那或者至少设置一个默认的背景颜色，它也是结束渐变颜色。

Answer 8

回答by morefromalan

I had trouble getting the answers in here to work.
I found it worked better to fix a full-size div in the body, give it a negative z-index, and attach the gradient to it.

我很难在这里找到答案。
我发现在 body 中修复一个全尺寸的 div，给它一个负的 z-index，并将渐变附加到它上面效果更好。

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Here's a full sample https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

这是一个完整的示例 https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

Answer 9

回答by Netsi1964

I have used this CSS code and it worked for me:

我已经使用了这个 CSS 代码，它对我有用：

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

A related information is that you can create your own great gradients at http://www.colorzilla.com/gradient-editor/

相关信息是您可以在http://www.colorzilla.com/gradient-editor/ 上创建自己的出色渐变

/Sten

/斯坦

Answer 10

回答by grizzy

this is what I did:

这就是我所做的：

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

before I floated the body, there was a gap on top, and it was showing the background color of html. if I remove the bgcolor of html, when I scroll down, the gradient is cut. so I floated the body and set it's position to relative and the width to 100%. it worked on safari, chrome, firefox, opera, internet expl.. oh wait. :P

在我浮动body之前，顶部有一个缺口，它显示的是html的背景颜色。如果我删除 html 的 bgcolor，当我向下滚动时，渐变会被剪切。所以我浮动了身体并将它的位置设置为相对并将宽度设置为 100%。它适用于 safari、chrome、firefox、opera、internet expl.. 哦等等。:P

what do you guys think?

你们有什么感想？

CSS 设置在身体上的 CSS3 渐变背景不会拉伸而是重复？

提问by JD Isaacks

回答by Bryan Downing

回答by Joshua Rudd

回答by Ricardo Zea

回答by John Sanford

回答by Justin Force

回答by Rick Smith

回答by subv3rsion

回答by morefromalan

回答by Netsi1964

回答by grizzy

相关推荐

最近更新

标签

CSS 设置在身体上的 CSS3 渐变背景不会拉伸而是重复？

提问by JD Isaacks

回答by Bryan Downing

回答by Joshua Rudd

回答by Ricardo Zea

回答by John Sanford

回答by Justin Force

回答by Rick Smith

回答by subv3rsion

回答by morefromalan

回答by Netsi1964

回答by grizzy

相关推荐

CSS 我们可以更改 <input type="file"> 样式吗？

CSS 过渡效果使图像模糊/移动图像 1px，在 Chrome 中？

垂直对齐 CSS :before 和 :after 内容

CSS 如何在div中添加滚动条？

相关推荐

最近更新

标签