Question

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

这是我自己能够得到的。它是在主图像上放置白色图像（部分半透明，部分全白）

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

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

Answer 1

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

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

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

Answer 2

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

更新：关于CSS Tricks (see it here)

的另一篇描述清晰的文章

您可以在以下帖子中详细了解clip-path：

您可以使用以下javascript＆amp; css摘要：

＆＃13;

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
		});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

.properties

使用js和css使图像的一部分透明

3 个答案: