代码之家  ›  专栏  ›  技术社区  ›  wildabeast

将背景图像和WebKit渐变分离为两个单独的CSS声明

  •  1
  • wildabeast  · 技术社区  · 14 年前

    目前,我有以下课程:

    #btnHelp
    {
     background: url(images/btnHelp.png) center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#9adc6d), to(#6eba3a));
    }
    

    我想将背景图像部分从渐变部分分为两个单独的类,如下所示:

    #btnHelp
    {
     background-image: url(images/btnHelp.png);
     background-position:center;
     background-repeat:no-repeat;
    }
    
    .green
    {
     background: -webkit-gradient(linear, left top, left bottom, from(#9adc6d), to(#6eba3a));
    }
    

    但一个覆盖另一个,而不是将两者结合。

    1 回复  |  直到 14 年前
        1
  •  2
  •   Blair McMillan    14 年前

    你不能。根据 webkit blog post :

    可以在以下位置使用渐变:

    background-image
    border-image
    list-style-image
    content property
    

    其中,唯一对你有用的是背景图像。你可以很明显地把位置和重复部分分开。