Question

我想知道将旋转文本直接放在图像左上角的最有效方法是什么？请记住，如果文本框的高度与图像的高度一致，我希望它，图像比例会有所不同（高图像，短图像，宽图像等）

以下是我想要实现的目标： enter image description here

我怎么能这样做？提前谢谢！

哎呀，忘了添加jsfiddle。您可以查看here!

.image.information {
  display:block;
  position:absolute;
  margin:0;
  top:45%;
  left:100%;
  height:100%;
  -webkit-transition:all 250ms linear;
  -o-transition:all 250ms linear;
  transition:all 250ms linear;
  transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.image-wrap {
  height: 100%;
  width: 100%;
  display: block;
}
.image-inner img {
  width: 500px;
  height: auto;
  display: block;
}

<div class="image-wrap">
  <img class="image-inner" src="http://i.stack.imgur.com/YyMHW.jpg" alt="" />
  <div class="image information">
    information<br/>
    informa<br/>
    info
  </div>
</div>

Answer 1

这可以使用CSS3转换，但在DOM中需要额外的元素：

<div class="image-wrap">
    <img class="image-inner" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/08/korea5b.jpg" alt="" />
    <div class="image information">
      <div class="info-inner">
        information
        <br/>informa
        <br/>info
      </div>
    </div>
</div>

现在有一些绝对定位的魔法：

.image.information {
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 75px;
    background: #ccc;
}
.info-inner {
    text-align: center;
    position: absolute;
    top: 50%; 
    left: 50%; 
    margin-top:-75px;
    margin-left: -75px;
    height:55px;
    width: 150px;
    vertical-align: bottom;
    transform: rotate(90deg);
}
.image-wrap {
    height: 100%;
    width: 100%;
    position: relative;
}
img.image-inner {
    width: 300px;
    margin-left: 75px;
}

请注意，没有指定显式文本高度的方法，没有简单的方法可以使垂直居中的文本。在这种情况下，我选择了55px。它将拉伸以匹配您指定的任何图像的高度。

JSFiddle：http://jsfiddle.net/zephod/ckqcLsbv/2/

旋转了与图像外部左上角对齐的文字？

1 个答案: