Html CSS中的虚线背景叠加效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28652571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dotted background overlay effect in CSS
提问by George
I'm trying to achieve the background effect on this website: http://mountaintheme.com/themeforest/mountain/home.html
我试图在这个网站上实现背景效果：http: //mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
背景图片似乎被点状覆盖之类的东西覆盖了。
Is there a way to create this effect with CSS only?
有没有办法只用 CSS 来创建这种效果？
采纳答案by slashsharp
Here'sone way of doing it.
这是一种方法。
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container. Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
基本上，您在页面容器之外添加一个容器。为它添加一个固定位置，并添加一个伪元素 :after 并给它一个背景图像。
回答by Alexander O'Mara
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
有点晚了，但这里有一个解决方案，它只使用 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>回答by ghosh'.
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
这是我这样做的方式https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a>tag (with display:block), and <img>is the dot overlay (its size should be defined in the CSS).
非常简单和纯粹的 CSS 解决方案。问题在于实际图像是<a>标签的背景（带有display:block），并且<img>是点叠加（其大小应在 CSS 中定义）。
HTML:
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:
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:
输出：
回答by sixtyXi
You can implement this using only css background properties:
您可以仅使用 css 背景属性来实现：
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
