html - CSS中的虚线背景叠加效果

Question

我试图在这个网站上实现背景效果: http://mountaintheme.com/themeforest/mountain/home.html

背景图片似乎被点状覆盖物覆盖。

有没有办法只用 CSS 来创建这种效果？

Answer 1

有点晚了，但这是一个仅使用 CSS 的解决方案，它使用 radial-gradient 创建的模式来创建点覆盖。

.image {
	width: 800px;
	height: 600px;
	position: relative;
	background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
	background-size: cover;
}
.image:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(127, 127, 127, 0.5);
	background-image: radial-gradient(black 33%, transparent 33%);
	background-size: 2px 2px;
}

<div class="image"></div>