当前位置：文江博客话题详情

正文上设置的 CSS3 渐变背景不会拉伸而是重复？

发布于 2024-09-02 07:35:08 字数 295 浏览 4 评论 0原文

好吧，假设内的内容总共 300px 高。

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可是我不能没有你 2024-09-09 07:35:08

应用以下 CSS：

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

编辑： 将 margin: 0; 添加到每个评论的正文声明 (马丁）。

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

Apply the following 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).

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

回复收藏 0 原文

对岸观火 2024-09-09 07:35:08

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

例如：

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

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

E.g.:

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

回复收藏 0 原文

难忘№最初的完美 2024-09-09 07:35:08

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

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

像这样：

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

不过还有第二种解决方案。

正如其他人所说，将值 fixed 添加到 background 声明中，将使渐变延伸到视口的整个高度。

像这样：

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

当然，您仍然需要在 html 中声明 min-height: 100%;。

这是 CodePen 中的演示，您可以在其中使用这两种解决方案： https://codepen.io/ ricardozea/pen/abwGBmz?editors=1100

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 content without repeating, even if the content is scrollable.

Like this:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

There's a second solution though.

As others have said, adding the value fixed to the background declaration, will make the gradient extend the full height of the viewport.

Like this:

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

Granted, you still need to declare min-height: 100%; in the html.

Here's a demo in CodePen where you can play with both solutions: https://codepen.io/ricardozea/pen/abwGBmz?editors=1100

回复收藏 0 原文

停滞 2024-09-09 07:35:08

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

   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>

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

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.

回复收藏 0 原文

差↓一点笑了 2024-09-09 07:35:08

设置 html { height: 100%} 会对 IE 造成严重破坏。这是一个示例 (png)。但您知道什么效果最好吗？只需在标记上设置背景即可。

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

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

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 {
  -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. :)

回复收藏 0 原文

无声静候 2024-09-09 07:35:08

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

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

这是一个示例：

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;
}

这已经过测试可以使用 IE、Chrome 和 Firefox 来处理各种尺寸和滚动需求的页面。

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

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.

回复收藏 0 原文

清君侧 2024-09-09 07:35:08

在末尾添加一个空格和单词fixed就足够了。无需设置高度。

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}

Adding a space and the word fixed to the end should be sufficient. No need to set heights.

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}

回复收藏 0 原文

人事已非 2024-09-09 07:35:08

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

回复收藏 0 原文

败给现实 2024-09-09 07:35:08

我很难在这里找到答案。
我发现在 body 中修复一个全尺寸的 div，给它一个负的 z 索引，然后给它附加渐变效果会更好。

<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>

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

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.

<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

回复收藏 0 原文

十年九夏 2024-09-09 07:35:08

我使用了这个 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;
}

相关信息是，您可以在 http://www.colorzilla.com/gradient-editor/

/Sten

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

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/

/Sten

回复收藏 0 原文

蓬勃野心 2024-09-09 07:35:08

这就是我所做的：

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%;
}

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

你们觉得怎么样？

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

what do you guys think?

回复收藏 0 原文

网名女生简单气质 2024-09-09 07:35:08

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

回复收藏 0 原文

﹉夏雨初晴づ 2024-09-09 07:35:08

我只是添加一些像素，而不是 100%，现在得到了这个，它适用于整个页面，没有间隙：

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

instead of 100% i just add some pixxel got this now and it works for whole page without gap:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

回复收藏 0 原文

~没有更多了~

关于作者

孤蝉

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

正文上设置的 CSS3 渐变背景不会拉伸而是重复？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（13）

关于作者

相关话题

热门标签

推荐作者

游缘惊梦

小兔几

Glik

生生漫

Luxian

Champion-Ming

友情链接

正文上设置的 CSS3 渐变背景不会拉伸而是重复？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（13）

关于作者

相关话题

热门标签

推荐作者

游缘惊梦

小兔几

Glik

生生漫

Luxian

Champion-Ming

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。