3

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

4

3 回答 3

4

: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/

于 2012-05-17T10:33:03.583 回答
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 的对角线背景是不可能的。

于 2012-05-17T07:37:48.217 回答
1

你也许可以得到这样的工作：

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;
}

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

于 2012-05-17T07:40:53.580 回答