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

我有一個可重複帶子元素的包裝元素：內容元素，左和右元素，所有div。如何在CSS3元素的背景中放置和旋轉文本？

我想添加一些文字（即「退休」），旋轉幾度，就像內容背景中的水印一樣。這不能是背景圖片，因爲這些文字應該被本地化（並且爲了維護的目的，更容易改變文本而不是圖像）。

下圖顯示的是文本「退休」的配置（不顯示左和右元素）：

enter image description here

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

來源

2013-10-23 elbaid

這裏是一個工作代碼：

的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-23 02:05:17

忘了提一個可重複的元素，所以我修改後的代碼使用'位置：relative'，調整'width'，'height'，'top'和'left'屬性位置文本。 – elbaid

你可以使用transform:rotate()。看看這個http://www.w3schools.com/cssref/css3_pr_transform.asp。你必須在一個元素裏面放一個元素才能得到你想要的效果。

注：這不會在舊的瀏覽器，所以你可能希望只使用類似：

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

來源

2013-10-23 01:50:23 PHPglue

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

回答

相關問題