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

CSS 背景重复

发布于 2024-08-01 19:36:00 字数 25 浏览 2 评论 0原文

有没有办法让背景图像拉伸而不是重复？

原文

分享到QQ

分享到微博

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

发布评论

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

定格我的天空 2024-08-08 19:36:00

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

这不会拉伸你的图像，但它会使图像不重复。

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

This will not streach your image, but it will make the image not to repeat.

回复收藏 0 原文

沙与沫 2024-08-08 19:36:00

背景大小是CSS3，尚不支持。
您可以看一下这篇文章：如何在网页

希望这有帮助。

回复收藏 0 原文

自演自醉 2024-08-08 19:36:00

仅在 CSS3 中

您可以使用图像并设置其宽度和高度到 100%，z-index 到 -1 位置到绝对值。这可能有用。

回复收藏 0 原文

离鸿 2024-08-08 19:36:00

不使用任何类型的跨浏览器兼容的CSS（但是有background-size属性。）

如果这是针对任何浏览器，那么这是可能的。否则，您需要使用并拉伸它。

以下是在最新浏览器中执行此操作的方法：

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

否则，使用：

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

Not using any kind of cross-browser compatible CSS (there is the background-size property however.)

If this is directed at any browser in particular, it might be possible. Otherwise, you'll need to use an <img> and stretch that.

Here's how you do it in recent browsers:

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

Otherwise, using an <img>:

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

回复收藏 0 原文

~没有更多了~