在动态大小的div上重叠图片 [英] Overlay image on dynamically sized div

问题描述

这里是我有：

<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 ，我想要一个半透明的5px x 5px图片来覆盖div。图片必须重复填充div的宽度和高度。

What I want to do is this: whenever I rollover a div with the class overlay, I want a semi-transparent 5px x 5px image to overlay the div. The image would have to repeat to fill up the width and height of the div.

这是最好的方法是什么？我最初的想法是每当我滚动一个div的类，我动态创建一个绝对定位的div，具有相同的确切的宽度和高度的div，我滚过，新的div具有透明的重复背景图像。 p>

What's the best way to do this? My initial thought was whenever I rollover a div with that class, I dynamically create an absolute positioned div that has the same exact width and height of the div I'm rolling over, and that new div has the transparent repeating background image.

推荐答案

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

You can use pseudo elements, no need for 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 */
}

演示： a href =http://jsbin.com/ayesec/3/edit =nofollow> http://jsbin.com/ayesec/3/edit

Demo: http://jsbin.com/ayesec/3/edit

这篇关于在动态大小的div上重叠图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！