文本在图像的顶部 [英] text on the top of an image

问题描述

我想将一些文字置于图片的两个角落，一个在左上角，另一个在右上角。
这样的东西：

I want to center some text in two corners of an image, one in the top left and other in the top right. Something like this:

.left,
.right {
  width: 300px;
  height: 200px;
  float: left;
}
.left-div,
.right-div {
  position: relative;
}
.left-text,
.right-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  color: white;
  padding: 5px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.rotate-left {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
.rotate-right {
  -moz-transform: translateX(50%) translateY(50%) rotate(90deg);
  -webkit-transform: translateX(50%) translateY(50%) rotate(90deg);
  transform: translateX(50%) translateY(50%) rotate(90deg);
}

<div id="row">
  <div class="left-div">
    <img class="left" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <p class="left-text rotate-left">
      text 1
    </p>
  </div>

  <div class="right-div">
    <img class="right" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
  </div>
  <p class="right-text rotate-right">
    text 2
  </p>
</div>

一些原因段落与文本不是中心在他们应该是，我不知道为什么？

for some reasons the paragraphs with text are not centered where they are supposed to be, I don't know why?

这里是我的JS FIDDLE

推荐答案

使用 rotate 从中使用 transform-origin 来控制旋转后的位置。

When using rotate you need to adjust from where using transform-origin to control its position after the rotation.

.left,
.right {
  width: 300px;
  height: 200px;
  float: left;
}
.left-div,
.right-div {
  position: relative;
}
.left-text,
.right-text {
  position: absolute;
  top: 0;
  background-color: gray;
  color: white;
  padding: 5px;
}
.right {
  float: right;
}
.rotate-left {
  left: 0;
  transform-origin: bottom left;
  transform: translateY(-100%) rotate(90deg);
}
.rotate-right {
  right: 0;
  transform-origin: bottom right;
  transform: translateY(-100%) rotate(-90deg);
}

<div id="row">
  <div class="left-div">
    <img class="left" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <div class="left-text rotate-left">
      text 1
    </div>
  </div>

  <div class="right-div">
    <img class="right" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
    <div class="right-text rotate-right">
      text 2
    </div>
  </div>
</div>

位于图像外部

.left,
.right {
  width: 270px;
  height: 200px;
  float: left;
}
.left-div,
.right-div {
  position: relative;
  margin: 0 30px;
}
.left-text,
.right-text {
  position: absolute;
  top: 0;
  background-color: gray;
  color: white;
  padding: 5px;
}
.right {
  float: right;
}
.rotate-left {
  left: 0;
  transform-origin: top left;
  transform: rotate(90deg);
}
.rotate-right {
  right: 0;
  transform-origin: top right;
  transform: rotate(-90deg);
}

<div id="row">
  <div class="left-div">
    <img class="left" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <div class="left-text rotate-left">
      text 1
    </div>
  </div>

  <div class="right-div">
    <img class="right" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
    <div class="right-text rotate-right">
      text 2
    </div>
  </div>
</div>

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