CSS3 : Creating Dots above a image without a div container

Question

关于website of Nintendo Online是一个后图像，由于 CSS，它上面有一些小点。我也想这样做，但不在图像周围使用 div 容器。

这是我当前的代码:

.image {
  background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}

<img class="image" src="http://media2.giga.de/2013/06/osx_hero_2x.jpg" height="250" width="500px">

我必须更改什么才能使其可见？如果我将 z-index 设置为 1，图像也会向上一级。有可能吗？

Answer 1

使用 :before 或 :after

http://jsfiddle.net/omjo21mk/

div {
  background: url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) repeat;
    position: relative;
    min-height: 200px;
    -webkit-background-size: cover;
		-moz-background-size: cover;
			background-size: cover;
}
div:before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat;
}

<div></div>