Question

所以这就是我所拥有的：

<div class="overlay">
    <p>text text</p>
</div>

<div class="overlay">
    <p>text text text text text text</p>
    <p>text text text text text text</p>
    <p>text text text text text text</p>
    <p>text text text text text text</p>
</div>

我想要做的是：每当我使用类overlay翻转div时，我想要一个半透明的5px x 5px图像来覆盖div。图像必须重复以填充div的宽度和高度。

最好的方法是什么？我最初的想法是每当我使用该类翻转div时，我动态创建一个绝对定位的div，它具有与我翻转的div相同的精确宽度和高度，并且新div具有透明的重复背景图像。

Answer 1

你可以使用伪元素，不需要JS：

div.overlay { 
  position: relative;
}
div.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(img.png);
  opacity: .5; /* if needed */
}

演示： http://jsbin.com/ayesec/3/edit

Answer 2

CSS Hover应该有效吗？

 .overlay:hover {
    background: url("/your/img.png");
 }

在动态大小的div上叠加图像

2 个答案: