Мой текст вращается, но фоновое изображение не

Question

Мой текст вращается, но фоновое изображение не

0

Я создаю вертикальное меню, и мой текст может поворачиваться правильным образом, но изображение (вертикальное изображение) кажется горизонтальным.

Хочу иметь:

Хочу, чтобы я хотел:

Код CSS:

.menu {
cursor: pointer;
display: inline-block;

transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;

background-image:url('button.jpg');
width: 61px;
height: 205px;
}

a{
text-decoration: none;
color: #fffde5;
font-family: Gobold;
font-size: 30pt;
}

a:hover {
color: #338bb0;
}

Код HTML:

<div id="menu-box">
    <a class="menu" href="#" >HOME</a>
    <a class="menu" href="#" >MYSELF</a>
    <a class="menu" href="#" >PORTFOLIO</a>
    <a class="menu" href="#" >CONTACT ME</a>        
</div>

Я подхожу к этому неправильно? Я не знаю, в чем проблема. Решение, представленное ниже, не отображает изображение.

Nanou Ponette 19 сен. 2013, в 11:51

Источник

Теги:

html

css

css3

1 ответ

Ещё вопросы

Love Trivedi · Answer 1 · 2013-09-19T07-27-00.000Z

Использовать этот css это будет работать

.menu {
cursor: pointer;
display: inline-block;

transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;

background-image:url('button.jpg');
width: auto; /*Changed*/
height: 61px; /*Changed*/
}

Сначала я этого не видел, но кажется, что изображение совсем не вращается, а просто повторяется.