1

繰り返しのない背景画像とグラデーションを同時に使用する方法

// this only show some gradient
background-image: url('../../imgs/0/cart.png') no-repeat left center,-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Saf4+, Chrome */

//This is ok
background-image: url('../../imgs/0/cart.png'),-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Saf4+, Chrome */
4

2 に答える 2

1

「url('../../imgs/0/cart.png') no-repeat left center」はbackground-imageプロパティの有効な値ではありません。これは背景の短縮形の有効な値です。

CSS で複数の背景を指定する方法は 2 つあります。

    background: url('http://placekitten.com/256/150') no-repeat left center, linear-gradient(to bottom, rgba(238,238,238,1), rgba(204,204,204,1)) no-repeat;

または各サブプロパティ値の個別のリストのように

    background-image: url('http://placekitten.com/256/150'), -webkit-gradient(linear, 0 100%, 0 0, from(rgba(238,238,238,1)), to(rgba(204,204,204,1)));
    background-image: url('http://placekitten.com/256/150'), -webkit-linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1));
    background-image: url('http://placekitten.com/256/150'), linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1));
    background-repeat: no-repeat, no-repeat;
    background-position: left center, left top;
    background-size: auto, 100% 100%;

グラディエントのプレフィックス付きのすべてのバージョンに対して background-repeat などの値を複製する必要がないため、後者をお勧めします。

于 2013-07-02T08:58:16.330 に答える