CSS中的虚线背景叠加效果

时间:2015-02-21 23:19:55

标签: html css background-image

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

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

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

5 个答案:

答案 0 :(得分:14)

有点晚了,但是这里有一个解决方案,只使用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>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

以下是我执行此操作的方式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*/
}

<强>输出:

Output

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

Here's一种方法。

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

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

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

答案 4 :(得分:0)

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

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

您可以通过将黑色(#000)替换为任何颜色来更改点的颜色,并通过替换#EEE来更改背景颜色。

要调整点的大小,请播放10%和15px。