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>