2

我想用一个重复的三角形来装饰我的页面底部。图片显示一个三角形，但我想填充整个水平 div。

到目前为止我得到的截图：http: //i.stack.imgur.com/JJA6D.png

<div class="container triangle"> </div>

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}

这是可能的还是我必须使用 img 作为背景？

感谢您的任何帮助。

4

5 回答 5

2

在你的 CSS 中使用背景图片-

background:url("http://site.com/img/whatever.svg");

然后将其设置为仅水平重复-

background-repeat:repeat-x;

这意味着是的，您必须使用背景图像。

您可以使用 jQuery 或其他方式克隆元素，但我认为这不值得。

于 2013-06-21T09:26:06.783 回答
1 
background-image:url('your image url');
background-repeat:repeat-x;
于 2013-06-21T09:18:26.020 回答
1

我的意见是在 CSS 中使用背景图像，如果它们不被用作链接等。基本上，如果你不关心这些图像的 SEO。考虑到这一点，只需为您的图像使用一些 CSS。

background-image: url("yoururl/image.jpg") repeat-x;

正如已经提到的，您可以在技术上使用 JQuery 的克隆方法。这是一个坏主意。为什么要在 CSS 处理页面时为页面添加额外的东西。

于 2013-06-21T09:24:58.973 回答
1

如果你想试验一下，有一个 CSS 属性可以让你使用一个元素（在本例中是你的三角形 div）作为背景图像。该属性是background:element().

您可以在 Firefox中查看演示。

但是，此属性仅在带有前缀的 Mozilla 中有效，-moz-但也有人尝试在 webkit 浏览器中使用。因此，希望将来可以通过更广泛的浏览器支持来实现。

于 2013-06-21T11:18:13.343 回答
0

使用 img 作为背景并让它重复。不得不说我更喜欢背景图片而不是html代码中的图片。这是因为人们无法轻松地将它们复制为 html 代码中的图像

于 2013-06-21T09:15:35.217 回答