1

我试图在图像顶部放置一个带有文本的 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

4

2 回答 2

4

那是因为你的目标是一个 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;
}
于 2013-10-29T18:28:13.633 回答
0

如何通过background-image:属性将图片设置为背景。然后你可以让你的 div 可点击<div onclick="window.location="url";>

详细来说，您的 CSS 将如下所示：

.image {
  width:310px;
  height:310px;
  background-image:url('pathtoimage');
}
于 2013-10-29T18:27:00.197 回答