图像顶部的文字

Question

我想将一些文字放在图像的两个角中，一个在左上角，另一个在右上角。 像这样的东西：

.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>

由于某些原因，带有文字的段落不在它们应该居住的地方，我不知道为什么？

这是My JS FIDDLE

Answer 1

您可以使用flex和writing-mode。

示例：

＆＃13;

＆＃13;

  #row,
  #row>div {
    display: flex;
  }
  
  .left-div {
    margin: 0 0 0 auto;
  }
  
  .right-div {
    margin: 0 auto 0 0;
  }
  
  .rotate-left,
  .rotate-right {
    order: -1;/* puts element at front in visual flow */
    writing-mode: vertical-lr;/* link for explanation  provided earlier */
    /* makeup*/
    width: 1.2em;
    background: black;
    color: white;
    padding: 0.5em;
    /* puts it a top against sibling tag */
    flex-shrink:0;
    margin: 0;
    align-self:flex-start
  }
  
  .rotate-right {/* reset values */
    writing-mode: vertical-rl;
    order: 1;
  }
  
  img {
    width: calc(100% - 2em);/* whatever is needed , if needed */
    flex: 1 0 auto;/* preserve ratio */
  }

＆＃13;

<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" />
  <p class="right-text rotate-right">
    text 2
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Pen to fork and play with

或者我误解了你想要的这些to stand？

Answer 2

使用rotate时，您需要在旋转后使用transform-origin进行调整以控制其位置。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

样本2，位于图像外

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;