0

CSS3で背景画像の一部だけを表示することはできますか? 画像を背景として使用したいのですが、半分しか表示されません。背景画像用に定義できるマスクのようなものはありますか?

4

4 に答える 4

0

WebKitはCSSでアルファマスクをサポートするようになりました。SVG画像をマスクとして使用できます。たとえば、部分的に透明な円。

-webkit-mask-image：url（circle.svg）;

http://webkit.org/blog/181/css-masks/

お役に立てれば。

于 2010-06-22T10:24:31.043 に答える
0

唯一の問題は、「clip-path」、「mask」、および「filter」(IE「filter」ではなく、SVG「filter」) が Firefox と Safari (はい、Chrome ではありません) でのみ機能することです。そして、彼らはそれを異なって行います。Firefox では、ID を介して指定された svg クリップパスが必要です。

.box { clip-path: url("roundedrect.svg#cp1"); }

一方、Safari は形状自体を使用してクリップパスを作成します。

.box { clip-path: url("roundedrect.svg"); }

Opera と Chrome でそれを行う方法をまだ発見していません。

しかし、FF と Safari の「クロス ブラウザ」の例については、http: //tokimon.dk/testing/css-svg-test.htmlを作成しました。

それ以外の場合は、CSS 3 の背景操作から何かを得ることができます: http://www.css3.info/preview/

于 2010-07-16T09:48:26.070 に答える
0

これを試して： 

body {
    background-image: url('top.jpg'), 
                      url('middle.jpg'), 
                      url('bottom.jpg');
}
于 2010-06-16T12:42:04.650 に答える
0

Opera では、xhtml ページでインライン SVG のみを使用してその効果を得ることができます。画像を SVG 内にチャックし、マスクを定義して<use xlink:href="#image" mask="url(#yourmask)"/>、効果を得るために a を実行します。

于 2010-08-12T04:53:20.683 に答える