我试图在图像上放置带文本的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; }更多推荐
发布评论