0

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

我想添加一些文本（即“已退休”），旋转几度，例如内容背景中的水印。这不能是背景图像，因为此文本应本地化（并且出于维护目的，更容易更改文本而不是图像）。

下一张图片显示了文本“Retired”的配置（不显示左右元素）：

在此处输入图像描述

这是此元素的基本 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;
}
4

2 回答 2

2

这是一个工作代码：

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/

于 2013-10-23T02:05:17.073 回答
0

你可以使用transform:rotate(). 看看这个http://www.w3schools.com/cssref/css3_pr_transform.asp。您必须在 Element 中放置一个 Element 才能获得所需的效果。

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

background-image:url('location.png');
于 2013-10-23T01:50:23.717 回答