Свойство background-origin CSS3 работает в Firefox?

Я хочу использовать свойство CSS3 для создания сложного фонового изображения с угловой тенью и т. Д. Включая фоновое изображение, изображение левой границы, изображение правой границы. Итак, для <div class="outer"></div> я пишу CSS ниже:

    .outer
    {
        background:url("title_main.png");
        background-repeat:repeat-x;

        background-clip: content;
        background-origin:content;
        -moz-background-clip: content;
        -moz-background-origin: content;
        -webkit-background-clip: content;
        -webkit-background-origin：content;


        -webkit-border-image:url("title_border.png") 0 15 0 15 stretch;
        -moz-border-image: url("title_border.png") 0 15 0 15 stretch;
        border-image:url("fancy_title.png") 0 15 0 15 stretch;
        border-width:0 15px ;

        width:80px;
        height:32px;
    }

В браузере Chrome это работает хорошо, например: alt text

Но firefox это не нравится:alt text

Почему это произошло? Как я могу это исправить? Сделать эффект firefox похожим на хром?


css background-image
person hh54188    schedule 02.01.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Значения свойства background-origin равны content-box, padding-box и border-box в соответствии с . спецификация. Итак, что вы хотите:

.outer {
    -webkit-background-origin: content;
    -moz-background-origin: content; /* Firefox 3.6 and below */
    background-origin: content-box; /* Firefox 4 and above */
    /* etc. */
}
person David Baron    schedule 02.01.2011
comment
Извините, моя версия firefox 3.6.13, независимо от содержания или содержимого, она все равно не работает. - person hh54188; 03.01.2011
comment
Тем не менее, вы все равно должны написать его таким образом, чтобы он работал в браузерах, соответствующих стандартам, чтобы, как только вы заставите его работать, он с большей вероятностью продолжал работать в будущем. - person David Baron; 03.01.2011