Question

如何在bbc网站here

中为html中的图像添加边框和标题

这是我试过的：

<!DOCTYPE html>
<html>
<body>

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:0px solid black;border-right:0px solid black;border-bottom:10px solid black;border-left:0px solid black;">

</body>
</html>

但我无法在边框内添加标题

这里没什么帮助：

Answer 1

正如@SuperCoolHandsomeGelBoy所说，你肯定需要更多元素才能实现这一目标。

例如，这是我写的一个快速片段，用于说明如何完成“边框”标题和叠加标题。（“边界”标题实际上不是边界）

.image-container{
  width: 660px;
}
.image{
  display: block;
  position: relative;
}
img{
  display: block;
  max-width: 100%;
}
.caption{
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba( 0,0,0,.4 );
  color: #fff;
  padding: 1px 4px;
}
.border-caption{
  background-color: black;
  padding: 15px 12px;
  display: block;
  color: #fff;
}

<div class="image-container">
	<div class="image">
		<img src="http://ichef-1.bbci.co.uk/news/660/cpsprodpb/1E5A/production/_93007770_banki-moon.jpg" alt="Alt to the image" />
		<span class="caption">AFP PHOTO /UNITED NATIONS/ ESKINDER DEBEBE</span>
	</div>
	<span class="border-caption">UN Secretary-General Ban Ki-moon is pondering his options as his term comes to an end</span>
</div>

Answer 2

避免使用内联样式

添加更多元素以获得更大的灵活性

body {
  background: #131418;
  color: #999;
  text-align: center;
  margin: 5% auto
}
.mycontainer {
  border: 1px solid #999;
  display: inline-block;
}
.myimage {
  padding: 20px;
}
.mycaption {
  margin-bottom: 20px
}
.mycontent {
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;
  max-width: 75%
}
.myimage,
.mycontainer,
.mycaption {
  max-width: 100%
}

<body>
  <div class="mycontainer">
    <img class="myimage" src="http://placehold.it/350x150">
    <div class="mycaption">Caption #1</div>
  </div>
  <div class="mycontent">
    <p>Lorem ipsum dolor sit amet, quo perfecto adolescens intellegebat an, pro ne quot nominati scribentur. Est sumo graeci accommodare et. Nulla veniam legimus sed ex. Eruditi alienum sadipscing ea mel, sonet facete maluisset nam te. Usu ut utinam intellegat
      theophrastus. Cu vero invidunt pertinax eos, falli legimus pri id, corpora vivendum praesent id eum.
      <p>
  </div>
  <div class="mycontainer">
    <img class="myimage" src="http://placehold.it/250x350">
    <div class="mycaption">Caption #2</div>
  </div>
  <div class="mycontent">
    <p>Lorem ipsum dolor sit amet, quo perfecto adolescens intellegebat an, pro ne quot nominati scribentur. Est sumo graeci accommodare et. Nulla veniam legimus sed ex. Eruditi alienum sadipscing ea mel, sonet facete maluisset nam te. Usu ut utinam intellegat
      theophrastus. Cu vero invidunt pertinax eos, falli legimus pri id, corpora vivendum praesent id eum.
      <p>
  </div>
  <div class="mycontainer">
    <img class="myimage" src="http://placehold.it/450x550">
    <div class="mycaption">Caption #3</div>
  </div>
  <div class="mycontent">
    <p>Lorem ipsum dolor sit amet, quo perfecto adolescens intellegebat an, pro ne quot nominati scribentur. Est sumo graeci accommodare et. Nulla veniam legimus sed ex. Eruditi alienum sadipscing ea mel, sonet facete maluisset nam te. Usu ut utinam intellegat
      theophrastus. Cu vero invidunt pertinax eos, falli legimus pri id, corpora vivendum praesent id eum.
      <p>
  </div>
</body>

图像html的标题和边框

2 个答案: