Question

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

背景图片似乎用虚线覆盖的东西覆盖。

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

Answer 1

有点晚了，但是这里有一个解决方案，只使用CSS来创建使用radial-gradient创建的模式的虚线叠加层。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

以下是我执行此操作的方式https://jsfiddle.net/soumyabg/wefLyrhp/

非常简单和纯粹的CSS解决方案。问题是实际图像是<a>标记的背景（display:block），而<img>是点重叠（其大小应在CSS中定义）。

<强> HTML：

<div class="image-container">
  <a class="dotm" href="#">
    <img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
  </a>
</div>

<强> CSS：

.dotm {
  display: block;
  background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
  background-size: cover;
}

.dotm-overlay {
  background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
  width: 100%;
  height: 400px; /*height of the image*/
}

<强>输出：

Answer 3

您可以仅使用CSS背景属性来实现此目的：

background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;

Answer 4

Here's一种方法。

<body>
 <div id="overlay">
     image
</div>

<div id="page">
 <div id="content">
  ....

基本上，您在页面容器外添加容器。为它添加一个固定的位置，并添加一个伪元素：在它之后并给它一个背景图像。

Answer 5

假设您有一个带有“ bg” id的对象，则此CSS类将添加小虚线背景：

#bg {
    background-image: radial-gradient(#000 10%, transparent 10%);
    background-size: 15px 15px;
    background-color: #EEE;
}

您可以通过将黑色（＃000）替换为任何颜色来更改点的颜色，并通过替换#EEE来更改背景颜色。

要调整点的大小，请播放10％和15px。

CSS中的虚线背景叠加效果

5 个答案: