如何使用CSS3在元素的背景中放置和旋转文本？

Question

我有一个带有子元素的可重复包装元素：content元素，左右元素，所有div。

我想添加一些文本（即“退休”），旋转几度，就像内容背景中的水印一样。 这不能是背景图像，因为该文本应该是本地化的（为了维护目的，更容易更改文本而不是图像）。

下图显示了文本“已退役”的处置（未显示左右元素）：

这是此元素的基本HTML布局，它可能很有用：

<div class="wrapper">
  <div class="leftcolumn">Left column</div>
  <div class="content">
    <h1>Text Text Text Text Text Text</h1>
    <p>Text Text Text Text Text Text Text Text Text</p>
  </div>
  <div class="rightcolumn">Right column</div>
</div>

和CSS：

.wrapper {
    margin: 0 auto;
    width: 450px;
    display:block;
    background-color:#222222;
    border-radius: 5px;
}

.content {
    float: left;
    width: 318px;
    padding-left: 5px;
}

.leftcolumn {
    width: 50px;
    float: left;
}

.rightcolumn {
    width: 75px;
    float: left;
}

.leftcolumn {
    width: 50px;
    float: left;
}

.rightcolumn {
    width: 75px;
    float: left;
}

Answer 1

这是一个有效的代码：

HTML

<div id="wrapper">
 <div id="leftcolumn">Left column</div>
  <div id="content">
    <h1>Text Text Text Text Text Text</h1>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
  <div id="rightcolumn">Right column</div>
 </div>
 <div id="textwatermark">
 <p>Retired</p>
 </div>

CSS

 #textwatermark {
 color: #d0d0d0;
font-size: 50pt;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:170px;
top:-100px;
}

在这里查看演示： http ： //jsfiddle.net/x6FwG/

Answer 2

你可以使用transform:rotate() 。 请查看http://www.w3schools.com/cssref/css3_pr_transform.asp 。 你必须在Element中放置一个Element来获得你想要的效果。

注意：这不适用于较旧的浏览器，因此您可能只想使用以下内容：

background-image:url('location.png');