html – 在Img上叠加Figcaption

概述我运行一个网站,我试图将版权信息添加到图像的左上角. img元素是float：left;并且figcaption元素位于img元素之后,但是我有一些问题： 1)如果我在figcaption元素上使用position：absolute CSS样式,它将覆盖图像上的标题,就像我想要的那样.但是,如果我一个接一个地列出多个图像,则字幕不再位于左上角,可能位于页面上的随机位置. 2)如果我在figcapt 我运行一个网站,我试图将版权信息添加到图像的左上角. img元素是float：left;并且figcaption元素位于img元素之后,但是我有一些问题：

1)如果我在figcaption元素上使用position：absolute CSS样式,它将覆盖图像上的标题,就像我想要的那样.但是,如果我一个接一个地列出多个图像,则字幕不再位于左上角,可能位于页面上的随机位置.

2)如果我在figcaption元素上使用position：relative CSS样式,它会将标题放在图像旁边.这可以在我添加左边时修复：-410px;到figcaption CSS因为所有图像都是相同的宽度.然而,设置为包裹在img元素旁边的p元素将留下一个空隙,如果figcaption最初定位于

我的问题是,如何在不影响p元素包装或缩进的情况下在img元素的左上角获取figcaption？

代码示例：https://jsfiddle.net/ComputerWhiz/mp9sdqq3/1/

解决方法 我相信这就是你所追求的：

img {  wIDth: 400px;  clear: left;  margin-bottom: 1px;  margin-right: 10px;}figcaption {  background-color: black;  color: white;  max-wIDth: 400px;  Font-size: 10px;  display: block;  float: left;  position: absolute;  top: 0;}figure {  position: relative;  float: left;}

<figure><img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg">  <figcaption>copyright Here</figcaption></figure><figure><img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg">  <figcaption>copyright Here</figcaption></figure><p>This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected  by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should  not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around  the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should  be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This  test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.</p>

你应该定位< figcaption>元素绝对,然后定位< figure>相对.绝对定位的元素相对于它们最接近的位置祖先定位,这就是为什么你想要在图上的相对定位.然后,浮动数字而不是图像.

总结

以上是内存溢出为你收集整理的html – 在Img上叠加Figcaption全部内容，希望文章能够帮你解决html – 在Img上叠加Figcaption所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。