Question

我希望有一个透明叠加的缩略图，因此当用户将鼠标悬停在图像上时，它将在中间显示一个“x”字形，并在其下方显示“删除照片”。它需要是纯css3，并且是供用户从其页面中删除图像，这是通过db完成的。但是，我如何确保它对从数据库调用的图像有效，而不是将图像硬编码到html中？

<div class="container">
   <div class="row">
      <div class="col-md-12">
         <img src="img1" data-src="" class="img-responsive">
         <img src="img2" data-src="" class="img-responsive">
      </div>
   </div>
</div>

谢谢。

Answer 1

我建议您使用像这样的伪元素

span {
  position: relative;
  display: inline-block;
}
span:hover:after {
  content: 'X \A' attr(data-text);
  white-space: pre;
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
}

<span data-text="Delete image">
  <img src="http://lorempixel.com/200/100/animals/3" data-src="" class="img-responsive">
</span>

Answer 2

这是用纯css

来完成你想要的一个选项

＆＃13;

.img-wrap:hover > .img-options{
  display: block;
}

.img-options{
  display: none;
}

＆＃13;

<div class="container">
   <div class="row">
      <div class="col-md-12">
         <div class="img-wrap">
           <img src="img1" data-src="" class="img-responsive">
           <div class="img-options">
             delete image 
           </div>
         </div>
      </div>
   </div>
</div>

＆＃13;

这样，您可以隐藏/显示每个图像的选项。确保完成css代码，使img-options元素绝对位于图像上方。

Answer 3

您可以在容器元素上使用css 2.1选择器:hover，并将X图标设置为该容器的透明背景图像。

.col-md-12:hover {
    background-image: url(x-icon.png);
    background-repeat: no-repeat;
    background-position: center center
}

而不是.col-md-12你应该使用通用的类名。

如何在数据库的图像上进行CSS叠加

3 个答案: