0

我正在使用 CSS3 边框来创建用户可以将图像拖到其上的形状。

问题是，我希望图像采用 div 的形状。

这可以用 CSS 完成还是我需要使用 jQuery 来完成？

谢谢

编辑：

 <div class="my-div">
     <img class="div-image" src="image.jpg" />
 </div>

 border-left: 300px solid red;
 border-right: 200px solid transparent;
 border-top: 30px solid transparent;
 border-bottom: 25px solid transparent;

这会创建一个带有斜边的盒子，形状是我想要的图像

这是一个例子：jsfiddle

4

3 回答 3

1

这里真正的问题是使用 CSS 边框来修改形状。

如果您想按照您的要求做，您需要使用更好的解决方案——即使用真实图形（可能是 SVG 或 Canvas）创建形状，而不是在 CSS 中伪造它。CSS 形状非常有限，只有在展示 CSS 完全可以做到这一点时才真正有用。它们在实践中并没有多大用处。

我的建议是 SVG。SVG 是一种可以嵌入 HTML 页面的矢量图形格式，可以更好地解决您的问题。您可以轻松地创建您想要的任何形状的元素，并用图像填充它。SVG 唯一的缺点是它不受旧浏览器（例如 IE8）的支持，但这很容易解决，因为 IE8 支持称为 VML 的替代格式。存在几个可与 SVG 或 VML 一起使用的 Javascript 库

我建议您查找一个名为Raphael的库。有关您可以做的一些事情，请参阅他们网站上的示例。这一切真的很容易。您将需要学习一些新的语法，但是一旦您掌握了基础知识，您就会对自己能取得的成就感到惊讶。

[编辑] 我刚刚看到您对 JSFiddle 示例的问题的编辑，说明您正在尝试做什么。

JSFiddle 不起作用的原因是您看到的灰色背景的形状是由边框组成的。框边框显示在框内容的顶部。在您的情况下，框边框占据了整个框本身，因此您只能看到灰色边框。图像已加载但隐藏在框后面。我将重复我最初所说的内容：CSS 形状对于除了简单的 hack 之外的任何事情都不是一个好的解决方案。如果您想要一个强大的解决方案，请使用 SVG。

于 2013-01-17T10:31:48.673 回答
0 
$("div[class=my-div]").css({  "position": "absolute",
        "top": "300px",
        "left": "200px",
        "display": "block",
        "width": "500px"
    });
于 2013-01-17T10:57:39.967 回答
0

您应该需要在 div 内将图像设置为 100% 宽度。

例子：

<div class="new-shape">(image)</div>

CSS：

div.new-shape img {
    width: 100%;
}
于 2013-01-17T10:32:23.613 回答