如何在CSS中将背景纹理设置为页面的50%

发布于 2024-12-29 08:17:36 字数 295 浏览 0 评论 0原文

我正在尝试弄清楚如何在所显示页面的 50% 高度上显示背景纹理，我目前正在使用以下代码，其中包括位于纯色背景色之上的半透明纹理。我希望背景颜色覆盖整个页面，但纹理停止在页面高度的 50% 处，但我有点不知道如何做到这一点，这是一个新的 css3 功能吗？如果是，有什么工作吗around 适用于其他浏览器或 jquery 替代品，如果这不适用于较旧的浏览器？

body {
background: url(../images/light/background.png) repeat scroll 0 0 #832029;}

原文

I am trying to work out how to display my background texture for 50% height of the page being displayed, I am using the following code at the moment which includes a semi transparent texture that goes above a solid background colour. I want the background colour to be over the whole page but the texture to stop at 50% of the page height, but I am a bit lost on how to do it, is this a new css3 function ?, if so are there any work around's for other browsers or jquery alternatives if this wont work with older browsers ?.

body {
background: url(../images/light/background.png) repeat scroll 0 0 #832029;}

分享到QQ

分享到微博

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

发布评论

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

天气好吗我好吗 2025-01-05 08:17:36

我不确定 50% 高度的想法是最好的方法。

试试这个：

body{
  background-color: #832029;
  background-image: url(../images/light/background.png);
  background-repeat: repeat-x;
}

调整背景图像的大小（您当前没有这样做）是一个 CSS3 功能，并非所有浏览器都支持，因此固定的图像高度（300-400 像素左右）可能是最好的。

I'm not sure the idea of 50% the height is the best approach.

Try this:

body{
  background-color: #832029;
  background-image: url(../images/light/background.png);
  background-repeat: repeat-x;
}

Resizing background images (which you are not currently doing) is a CSS3 function which is not supported by all browsers, so a fixed image height (300-400 or so pixels) would probably be best.

回复收藏 0 原文

明月松间行 2025-01-05 08:17:36

对于 CSS3，有 background-size 属性，并且支持所有主流浏览器，IE9+ 和 Opera 10+。对于 IE8 及更低版本，有一个 IE 过滤器< /a>

制作 2 张背景图片。一张图像是渐变（可以使用 CSS3: linear-gradient），第二个图像是纹理。使用多个背景并仅在纹理背景图像上设置背景大小。

如果您不使用此 CSS3 属性，您可以仅使用 HTML 和 CSS 来解决它。在名为#background 的内部创建一个div。并使用 CSS 为其指定绝对位置和 50% 的高度：

#background
{
  position: absolute;
  z-index: -1; // place it on the lowest layer
  top: 0; right: 0; bottom: 50%; left: 0;
  background: url('path/to/images/background.png') repeat scroll #832029;
}

For CSS3 there is background-size property and it has support in all major browsers, IE9+ and Opera 10+. And for IE8 and lower there is a IE Filter

Make 2 background images. One image is the gradient (which can be done with CSS3: linear-gradient too) and the second image is the texture. Use multiple backgrounds and set only a background-size on the texture background image.

If you wouldn't use this CSS3 property you can solve it with HTML and CSS only. Make a div inside the called #background. And with CSS give it an absolute position and a height of 50%:

#background
{
  position: absolute;
  z-index: -1; // place it on the lowest layer
  top: 0; right: 0; bottom: 50%; left: 0;
  background: url('path/to/images/background.png') repeat scroll #832029;
}

回复收藏 0 原文

~没有更多了~