Question

我正在尝试在图像上放置带文本的div但由于某种原因它不起作用。我的代码是：

<div id="pics">     
  <div class="inner">
      <a href=".." target="_blank"><img src=".." class="pic" height="310" width="310"></a>
    <div class="cover">blah blah</div>      
  </div>
</div>

我的CSS是：

 #pics{  
  overflow:hidden;
  display:block;
}

.inner a{
  position:relative;
  margin:3px;
  padding:10px;
  top:10px;
}

.inner{
  position: relative;
  display: inline-block;
}

.cover{  
  position: absolute;
  background-color: black;
   color: white;
  left: 0;
 right: 0;
 bottom: 0;
 top: 0px;
}

我尝试过很多东西，但似乎没有用。我可能搞砸了我的cs

Answer 1

那是因为你的目标是一个ID，而不是一个类。

换句话说，在CSS中你有一个ID（#cover）的定义，HTML代码有一个类：

<div class="cover">blah blah</div>

将HTML更改为具有ID：

<div id="cover">blah blah</div>

或更改CSS以定位班级名称：

.cover{  
  position: absolute;
  background-color: black;
  color: white;
  width: 100%;
  height: 100%;
  border-style: solid 5px;
  top: 0px;
}

<强>更新

你给.cover的宽度和高度为100％，但是绝对定位的元素并没有真正“理解”那个，所以我建议将它改为：（将左边，底边和右边放在边缘，这将使div符合相对父亲的100％宽度和高度）

.cover{  
  position: absolute;
  background-color: black;
  color: white;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid 5px;
  top: 0px;
}

Answer 2

如何通过background-image:属性将图片设置为背景。然后，您可以使用<div onclick="window.location="url";>

对div进行点击

详细说明你的css会是这样的：

.image {
  width:310px;
  height:310px;
  background-image:url('pathtoimage');
}

图像css顶部的文本

2 个答案: