web-dev-qa-db-ja.com

背景画像の上に透明なcss3グラデーションを重ねることができますか？

背景画像の上にcss3グラデーションを配置しようとしています。以下のコードを使用すると、グラデーションの上に背景画像が配置されますが、私はそれを逆にしようとしているので、グラデーションは上部のマスクとして機能します。

url(images/darkwood.png),
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
url(images/darkwood.png),
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

ご協力いただきありがとうございます

csscss3gradientmask
29
Pineapple Sunset

私は私のウェブサイトの1つでこれを行っています。

body {
        margin: 0;
        padding: 0;
        background: url('https://i.stack.imgur.com/MUsp6.jpg') repeat;
}

body:before {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
51
Yoann

例 この回答から は、サイズ変更可能なdivでは機能しません。

コードは正常に機能します。しかし、私が理解しているように、CSSは右から左に読み取ります。したがって、次を使用する必要があります。

div {
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat;
}

例： http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/

18
Alan