使用 CSS 或 Jquery 的图像样式？答案

【问题标题】：image style using CSS or Jquery?使用 CSS 或 Jquery 的图像样式？
【发布时间】：2016-10-03 17:35:43
【问题描述】：

如何使用CSS 设置这样的图像样式。

【问题讨论】：

img { // Style here }
那么到目前为止你尝试过什么？显示一些代码，然后问为什么它不起作用，不要来这里指望人们为你做这件事
可能不需要css，把img放到html里就行了。

标签： jquery css twitter-bootstrap-3

【解决方案1】：

我认为您希望做的是拍摄一张图像，然后遮盖其中的一部分。您可以通过 svg 和 css 的组合使用来实现这一点。

首先，您在标记中包含一个 svg，该 svg 定义了将用于剪辑路径的多边形（路径需要垂直翻转或使用矩阵变换，以说明 top->bottom 增加 Y 值的事实在 html 坐标中，但 bottom->top 增加了 svg 中的 Y 值）

剪辑路径的边界框是 0,0 325,205，显然是固定到绝对页面坐标。我的演示有效，因为图像位于页面的左上角。如果图像移动，则剪辑路径不会移动，因此您很容易遇到整个图像在整个剪辑路径之外并且什么都看不到的情况。

免责声明：我真的还没有深入研究剪辑路径。

编辑：这也可以用纯 css 完成 - 优点是坐标可以用百分比表示。更多内容：https://developer.mozilla.org/en/docs/Web/CSS/clip-path

剪辑路径的可视化（在 Inkscape 中）

接下来，您使用 css 和对 (ID'd) 路径的引用设置剪辑路径。

img {
  width: 325px;
  height: 205px;
  -webkit-clip-path: url(#clipPath);
  clip-path: url(#clipPath);
}
.panel
{
	width: 325px;
	background-color: #f6f5f3;
	font-family: verdana;
}
.panel p, .panel h3
{
	margin: 4px 16px;
}
.panel h3
{
	font-size: 1.25em;
	font-weight: bold;
}

<div class='panel'>
	<img src="http://previews.123rf.com/images/wavebreakmediamicro/wavebreakmediamicro1403/wavebreakmediamicro140343032/27149808-Portrait-of-university-students-with-laptop-lying-on-grass-on-college-campus-Stock-Photo.jpg" alt="" />
	<h3>Global Economic</h3>
	<p>Till the one day when the lady met this fellow
	and they knew it was much more than just a hunch</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg">
	<defs>
		<clipPath id="clipPath">
			<polygon points="0.5 201 65 191 82 206 98 187 272 158 325 0.50 0.6 0.5"/>
		</clipPath>
	</defs>
</svg>

【讨论】：

【解决方案2】：

您可以使用内联 HTML 对其进行样式设置：<img style = "width:300px;height 300px;">

或

使用 CSS（必须创建一个单独的文档，然后链接到您的 HTML）：

img{
width:300px;
height:300px;
}

【讨论】：