Question

我想在对角线方向上重复背景，而不是垂直或水平。你知道一种方法吗？例如，我想要一个从左上角开始的链条，从右下方对角重复。我正在考虑使用多个图像的背景重复解决方案，一个以有用的方式覆盖另一个背景（蝉方法），但没有我知道，如果你知道解决方案的话。

Answer 1

以旋转方式创建包含背景图像的:before规则，然后对其进行转换：

.foo:before {
    display: block;
    background: url("myimage") repeat-x;
    position: absolute;
    height: 100px;
    top: -50px;
    left: 0;
    width: 200%;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin:  left center;
    -moz-transform-origin:  left center;
    -webkit-transform-origin:  left center;
    content: "";
    z-index: -1;
}

.foo {
    position: relative;
    overflow: hidden;
}

http://jsfiddle.net/r8BzE/

Answer 2

最简单的方法（您将节省大量时间）是创建一个足够大（例如，500x500）png图像，其中包含对角线背景。如果可以的话，制作一个gif，文件大小也不会很大。

第二种解决方案是生成多个div。

说，你有一个50x50的png图像，你想对角地复制为500x500 div的背景。

制作10个水平div，每个50px（10％）高，并给每个连续的div +50 background-position-x。

#div1{
    background:transparent url(my_bg.png) 0px top repeat-y;
}
#div2{
    background:transparent url(my_bg.png) 50px top repeat-y;
}
#div3{
    background:transparent url(my_bg.png) 100px top repeat-y;
}

等。您也可以使用php或您正在使用的任何服务器端语言生成此css。

示例PHP代码：

<style type="text/css">
<?php
for ($i = 0; $i < 10; $i++){
    echo "#div$i{ background:transparent url(my_bg.png) ".(50*$i)."px top repeat-y; }";
}
?>
</style>

但是用普通的CSS来实现对角背景并不是唯一的div。

Answer 3

你可能能够得到这样的东西：

http://jsfiddle.net/johnkpaul/8LmgF/

http://johnkpaul.tumblr.com/post/17057209155/wish-background-repeat-had-a-repeat-diagonal-option

代码看起来像这样：

.original-background{    
   background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
}

.diagonal-background:before{
  content:"";
  background:url(http://img850.imageshack.us/img850/2400/rowofstars.gif) repeat;
  width:200%;
  height:200%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
  -webkit-transform:rotate(-13deg) translate(10px,-220px); 
  -moz-transform:rotate(-13deg) translate(10px,-220px); 
  -o-transform:rotate(-13deg) translate(10px,-220px); 
  -ms-transform:rotate(-13deg) translate(10px,-220px); 
}

.diagonal-background{
  overflow:hidden;
}

但制作背景图片可能更容易。以下是一些可以尝试的资源：

如何对角重复背景（每行只有1次）

3 个答案: