图像css顶部的文本(text on top of image css)

图像css顶部的文本(text on top of image css)

我试图在图像上放置带文本的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

I am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:

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

my CSS is:

#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; }

I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere

最满意答案

那是因为你的目标是一个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; }

That's because you're targetting an ID and not a class.

In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:

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

Either change the HTML to have an ID:

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

or change the CSS to target the class name:

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

UPDATE:

You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to: (place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)

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