文字在图像css顶部 [英] text on top of image css

问题描述

我试图在文字的顶部放置一个div，但由于某种原因它不起作用。我的代码是：

 < div id =pics> 
< div class =inner> 
< a href =..target =_ blank>< img src =..class =picheight =310width =310>< / a> ; 
< div class =cover>等等等等< / 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; 
背景颜色：黑色; 
颜色：白色; 
剩下：0; 
 right：0; 
 bottom：0; 
 top：0px; 
} 
  

我已经尝试过很多事情，但似乎没有奏效。我可能已经把我的cs搞乱了

解决方案

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

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

 < div class =cover>等等等等< / div> 
  

或者将HTML更改为ID：

 < div id =cover>等等等等< / div> 
  

或更改CSS以定位类名：

  .cover {
 position：absolute; 
背景颜色：黑色; 
颜色：白色; 
宽度：100％; 
身高：100％; 
 border-style：solid 5px; 
 top：0px; 
} 
  

更新： $ b

您给 .cover 一个100％的宽度和高度，但绝对定位的元素并不真正理解，所以我建议将其更改为：
（将左侧，底部和右侧放置到边缘，这将适合相对父母的100％宽度和高度）

  .cover {
 position：absolute; 
背景颜色：黑色; 
颜色：白色; 
剩下：0; 
 right：0; 
 bottom：0; 
 border-style：solid 5px; 
 top：0px; 
} 
  

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

解决方案

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

这篇关于文字在图像css顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！