使用一个CSS的多背景

我想使用多个图像作为背景。
例如：索引页 - 汽车图像，关于我的页面 - 记事本图像使用一个CSS的多背景

我试图添加以下代码：

body { 
    background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
}

但我不知道怎么切换他们。我如何选择使用哪个图像作为背景？

来源

2014-02-14 user1900665

y我们的菜单呢？或者你有内容的容器？ – deW1

-1

如果你使用静态Html你可以给你的身体元素或外部包装类。例如：

首页

<body class="homepage"> 

</body>

的公司简介页面

<body class="about_us"> 

</body>

，并设置CSS

.homepage { 
background-image : url('../path/to/image.jpg'); 
} 

.about_us { 
background-image : url('../path/to/image.jpg'); 
}

等每个页面。

您当前的CSS选择了全球性机构的工作，

body { 
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg); 
background-repeat:no-repeat; 
background-size:cover; 
}

这种类型的CSS的工作如果u希望页面上使用多个背景图片，而不是由不同BG的每一页。

来源

2014-02-14 23:57:50

嗨，你可以使用一种叫做“CSS Sprites”的技巧。简而言之，您可以使用精灵生成器工具http://spritepad.wearekiss.com/将所有图像合并为一个大图像。接下来，您更改大图像中的背景位置以获取元素的背景图像。

您可以了解更多从here

来源

2014-02-14 23:59:23

使用精灵的优点是可以在一个HTTP请求中获取加载的许多图像。对这种情况使用精灵将会造成更多的伤害，而不是更好，因为每个特定页面只会使用其中一个背景。因此，背景的精灵会无缘无故地增加图像下载大小（减慢页面加载时间）。 – t8tortotlover

我不同意！她试图为页面上的每个元素设置图像，即使您在多个页面中使用图像，使用Sprite也会有所帮助。看看我的答案中的链接。 –

您可以通过每个<body>标签设置与特定的ID做到这一点，然后分别风格的ID在CSS的：

<body id="home"> </body>

CSS

#home{ 
    background-color: red; 
    //or image, whatever properties you want 
}

http://jsfiddle.net/

来源

2014-02-15 00:00:57 leigero

您可以为每个页面的body元素添加一个特殊类，并为每种情况指定不同的背景图像。

HTML：

<body class="home"> 
    ... 
</body> 

<body class="about"> 
    ... 
</body>

CSS：

body.home{ 
    background: url(car.jpg); 
} 

body.about{ 
    background: url(notepad.jpg); 
}

来源

2014-02-15 00:01:24 t8tortotlover

据我所知，你有三种选择：

1）编码到HTML。为此，请将页面中的<body>更改为 <;body style="background-image: url(<url of image>); background-repeat: no-repeat; background-size: cover;">。

我认为这是次优的，因为这意味着很多在不同的地方打字，如果你想改变背景 - 重复重复-Y而忘记更改一个或多个页面，可能会导致不一致。。

2）使用“迷你样式表”由一个规则指定每个页面的背景。我认为这不是一个很好的解决方案，因为伴随着1）提出的问题，您还必须处理另一个HTTP请求，这会减慢页面加载速度。。

3）使用不同的ID每个体元件（所以你<body>将成为<body id="home">，<body id="about">，或其他任何东西，我认为这是最好的解决方案，因为它可以让你收集所有的代码在一个地方：

body { 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

body#home { 
    background-image: url(<home image url); 
} 

body#about { 
    background-image: url(<about image url); 
}

此代码可能会停留在所有页面中链接到的样式表中，因此您不会以任何额外的HTTP请求结束。如果要更改身体属性/值对之一不必经过大量文件更改每一个，你只需要改变一个。

来源

2014-02-15 00:53:35 wec

使用一个CSS的多背景

回答

相关问题