1

所以这就是我所拥有的：

<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>

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

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

4

2 回答 2

3

可以使用伪元素，不需要 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

div.overlay {
  position: relative;
  width: 300px;
  background: yellow;
}

div.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://placekitten.com/5/5);
  opacity: .5;
}
<div class="overlay">
  <p>text text text text text text</p>
  <p>text text text text text text</p>
  <p>text text !!HOVER!! text text</p>
  <p>text text text text text text</p>
  <p>text text text text text text</p>
</div>

于 2012-12-18T04:16:36.197 回答
0

CSS悬停应该工作吗？

 .overlay:hover {
    background: url("/your/img.png");
 }
于 2012-12-18T04:13:42.990 回答