图像形成div（CSS3）

我使用CSS3边框来创建形状，用户可以将图像拖动到它上面。图像形成div（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

来源

2013-01-17 user789122

你的意思是你要调整大小的图像？为什么不通过jquery将它们设置为backgroundimage并将backgroundrepeat设置为false？ – Vogel612

你有任何的代码？另外 - 我看不出为什么你可能需要一个jQuery。除非不应该动态完成。但无论如何，CSS在这里应该完全够用了。 –

你可以看到我在我的问题后，并链接到jsFiddle – user789122

实这里的问题是使用CSS边界来破解形状。

如果你想做你所要求的，你需要使用更好的解决方案 - 即使用真实图形（可能是SVG或Canvas）创建形状，而不是将其伪装成CSS。 CSS的形状是非常有限的，只有显示CSS可以完成它们的事实才有用。他们在实践中并没有太多用处。

我的建议是SVG。 SVG是一种可以嵌入到HTML页面中的矢量图形格式，对于您的问题来说，这将是更好的解决方案。您可以轻松创建任何想要的形状元素，并用图像填充它。 SVG唯一的缺点是它不被旧版浏览器支持（例如IE8），但这很容易解决，因为IE8支持另一种称为VML的格式。有几个Javascript库可以与SVG或VML一起工作

我建议您查找一个名为Raphael的库。查看他们网站上的例子，了解您可以做的一些事情。这一切都非常简单。你需要学习一些新的语法，但是一旦你掌握了基础知识，你会对你能达到的目标感到惊讶。

[编辑] 我刚刚看到你的编辑问题与JSFiddle的例子，你正在尝试做什么。

JSFiddle不起作用的原因是因为您看到的灰色背景的形状由边框组成。框边框显示在框内容的顶部。在你的情况下，盒子边框占据了盒子本身的全部，所以你可以看到你的灰色边框。图像被加载但隐藏在盒子后面。我会重复我之前说的话：除了简单的黑客之外，CSS Shapes不是一个好的解决方案。如果你想要一个强大的解决方案，请使用SVG

来源

2013-01-17 10:31:48 SDC

你的意思是SVG吗？ – Danield

@丹菲尔德 - 呃，是的。是的，我愿意。（没有足够的咖啡因，但今天早上对我来说，我猜...） – SDC

@Danield - 顺便说一句，请随意编辑这里的东西，如果它明显错误的那样。鼓励编辑。 – SDC

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

例子：

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

CSS：

div.new-shape img { 
    width: 100%; 
}

来源

2013-01-17 10:32:23 AfromanJ

$("div[class=my-div]").css({ "position": "absolute", 
     "top": "300px", 
     "left": "200px", 
     "display": "block", 
     "width": "500px" 
    });

来源

2013-01-17 10:57:39 Ksnrg

图像形成div（CSS3）

回答

相关问题