Как разместить и повернуть текст на фоне элементов с помощью CSS3?

Question

Как разместить и повернуть текст на фоне элементов с помощью CSS3?

0

У меня есть повторяемый элемент оболочки с дочерними элементами: элемент содержимого, с левым и правым элементами, все div.

Я хочу добавить текст (т.е. "Retired"), повернутый на несколько градусов, как водяной знак на фоне содержимого. Это не может быть фоновым изображением, потому что этот текст должен быть локализован (и для целей обслуживания проще изменить текст вместо изображения).

Следующее изображение показывает расположение текста "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;
}

elbaid 23 окт. 2013, в 03:50

Источник

Теги:

html

css

2 ответа

0

Вы можете использовать transform:rotate(). Проверьте это http://www.w3schools.com/cssref/css3_pr_transform.asp. Вам нужно будет поместить элемент в элемент, чтобы получить необходимый эффект.

Примечание. Это не будет работать в старых браузерах, поэтому вы можете просто использовать что-то вроде:

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

PHPglue 23 окт. 2013, в 00:23

Ещё вопросы

Joke_Sense10 · Accepted Answer · 2013-10-23T00-55-00.000Z

Вот рабочий код:

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/

Забыл упомянуть повторяемый элемент, поэтому я изменил код для использования position: relative , настройка width , height , top и left атрибутов для позиционирования текста.