CSS中的虚线背景叠加效果

Question

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

背景图片似乎覆盖了点覆盖之类的东西。

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

Answer 1

Here's 一种方法。

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

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

基本上，您在页面容器之外添加一个容器。给它加一个固定的位置，给它加一个伪元素:after，给它配个背景图。

Answer 2

有点晚了，但这是一个仅使用 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>

Answer 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*/
}

输出：

Answer 4

您可以仅使用 css 背景属性来实现：

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

Answer 5

假设您有一个 ID 为“bg”的对象，此 css class 将添加小的虚线背景：

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

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

要调整点的大小，请使用 10% 和 15px。

CSS中的虚线背景叠加效果

Dotted background overlay effect in CSS

html

css

background-image