Question

希望这将是一个快速的问题。我想在我的目标网页上添加一个可以扩展到任何屏幕的图像。我发现这个代码是建议的和最优的方法

html {
  background: url('image/img.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

但是我在实现这个问题时遇到了问题。这段代码完成它应该做的，但是如果我在html下设置它，那么这个图像发生在我在我的网站中调用html的任何地方，我不想要。我希望这只发生在我网站的一个页面中。我尝试创建自己的自定义html标签bodycover {}，但这不起作用。

我是新手，尚未迈出自定义html标签。我觉得有一个简单的解决方案，但我无法彻底研究它找不到它。

谢谢

编辑：如果有一种简单的方法可以在没有自定义元素的情况下使其工作更好。我根本就不知道一个

Answer 1

就像@Paulie_D所说，你不需要将它应用于html标签;标准div将起作用。另外，为新元素赋予宽度和高度一些尺寸。稍微清理一下：

.bg {
    width: 100%;
    height: 100%;
    background: url('image/img.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover; 
}

确保.bg的父元素的高度和宽度也为100％。

Answer 2

为什么不这样做，在特定页面的主体中添加属性或类。

这可以在服务器端，使用ASP或PHP，或客户端，在页面加载事件中完成。

要显示的页面

body {
  background-color: #ddd;
}
.big-bkg {
  background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

<body class="big-bkg">
</body>

要显示的页面

body {
  background-color: #ddd;
}
.big-bkg {
  background: url('http://lorempixel.com/800/600/nature') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

<body>
</body>

Answer 3

我会说：将所有内容放入body，而不是html

body {
  background: url('image/img.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

Answer 4

你可以使用一个简单的绝对div，宽度和高度100％就在body标签和z-index低于main-container之后。

＆＃13;

Some(r)

＆＃13;

None

＆＃13;

将全屏大小调整图像作为自定义元素中的背景

4 个答案: