使用 js 和 css 使图像的一部分透明 [关闭]答案

【问题标题】：Making part of an image transparent using js and css [closed]使用 js 和 css 使图像的一部分透明 [关闭]
【发布时间】：2016-06-04 05:48:42
【问题描述】：

我有一个图像会不时改变（但大小相同）。我需要使图像的一部分完全透明（底部）和一部分半透明（中间部分）和最后一部分（顶部）完全可见。我无法使用 Photoshop 或任何其他图形工具来执行此操作，因为图像会不时更改。我正在寻找使用 JS 和 CSS 的解决方案。

这是我自己能够做到的。就是在主图上放一个白色的图片（部分半透明，部分全白）

.trans_div{
    backgroung-image:url(transp.png);
    background-repeat:no-repeat;
    height:100px;
    position:absolute;
    bottom:0px;
}

附言。图像大小是固定的。效果大小和位置也是固定的。

【问题讨论】：

可以通过多种方式完成。 1）如果透明度和不透明度的位置是静态的，您可以简单地使用 CSS：重叠 div 并控制它们的不透明度 2）如果透明度和不透明度的位置不是静态的，您可以使用 css3 过渡或 javascript 来定位重叠分区。再次用 css 控制它们的不透明度。再说一次，他们没有这方面的代码或研究
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。

标签： javascript html css image opacity

【解决方案1】：

我最近没有尝试过，但是有一个 CSS 蒙版，您可以在其中创建要应用于图像的灰度蒙版。

http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property

您还可以将 Javascript 与 SVG 或 Canvas 元素一起使用。

【讨论】：

浏览器兼容性如何？
caniuse.com/#search=mask
SVG 或 Canvas 会得到更好的支持。
你有什么好的来源吗？
谷歌搜索很快找到了这个 SVG：tutorials.jenkov.com/svg/mask.html#using-gradients-in-masks

【解决方案2】：

这可以通过使用clip-path 属性来简单地实现。

更新：又是一篇在CSS Tricks (see it here)上描述得很好的文章

您可以在以下帖子中了解有关clip-path 的更多信息：

您可以使用以下javascript & css sn-p:

var $imageContainer = $("#image-container");
		var $img = $imageContainer.children("img");
		
		$imageContainer.css({
			position: "relative"
		});
		
		var $clonedImage = $img.clone();
		$imageContainer.append($clonedImage);
		
		$img.css({
			position: "absolute",
			zIndex: 100,
			"-webkit-clip-path":	"polygon(10% 10%, 90% 10%, 90% 75%, 75% 75%, 75% 100%, 50% 75%, 10% 75%)",
			"clip-path":	"polygon(10% 10%, 90% 10%, 90% 75%, 75% 75%, 75% 100%, 50% 75%, 10% 75%)"
		});
		
		$clonedImage.css({
			position: "absolute",
			zIndex: 50,
			opacity: 0.3
		});

#image-container{
			width: 500px;
			margin: 0 auto;
		}
		
		img {
			max-width: 100%;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="image-container">
		<img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Leila_Hatami_Cannes_2013.jpg" />
	</div>

【讨论】：

【解决方案3】：

我会创建 2 个 div，它们都具有相同的背景图像和背景位置偏移。然后，您可以更改包含 div 的不透明度并影响背景。

.top{
  backround-image: url(YOUR_IMAGE_PATH);
  background-position: 0 0;
  height: 500px;
  margin-bottom: 0;
}

.bottom{
  backround-image: url(YOUR_IMAGE_PATH);
  background-position: 0 -500px; //offset image to match the top 
}

【讨论】：