CSS3 background-origin属性在火狐工作？ [英] CSS3 background-origin property does work in firefox?

问题描述

我想使用CSS3属性来创建一个复杂的背景图像，其中有角落阴影等等。包括背景图像，左边框图像，右边框图像。因为< div class = outer>< / div> 我写下面的CSS：

I want use CSS3 property to make a complicated background image which with corner shadow and so on.Including background image,left border image,right border image.So,for the <div class="outer"></div>I write the CSS below:

    .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浏览器中，它的工作方式如下：

In chrome browser it work well like:

但firefox不喜欢这样：

But the firefox doesn't like this:

为什么会发生这种情况？ firefox效果像chrome吗？

Why would this happened?How can I fix this?Make the firefox effect like the chrome?

推荐答案

background-origin 属性是 content-box ， padding-box 和 border-box ，根据规范。所以你想要的是：

The values of the background-origin property are content-box, padding-box, and border-box, according to the spec. So what you want is:

.outer {
    -webkit-background-origin: content;
    -moz-background-origin: content; /* Firefox 3.6 and below */
    background-origin: content-box; /* Firefox 4 and above */
    /* etc. */
}

这篇关于CSS3 background-origin属性在火狐工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！