1

CSSについて質問があります。

2つのdivがあります。1つはbackground-color: #000;透明なpngファイルがあり、もう1つは背景が部分的にない（非常に透明です）ので、それを呼び出しましょうbackground-image: url(images/scrolltotop.png);。

私が欲しいのは、background-colorpngファイルからの透明度でオーバーライドすることです。そうすれば、背景が私のpngファイルを覆いません。私が何を意味するかを示すために画像を提供します：

透明なpngファイル

透明性のないもの

結果

そして今、私が取得したい結果（上記）を含む画像-htmlスタイルの背景を使用します。

背景色を透明で覆う方法はありますか？

ここに画像の説明を入力してください ここに画像の説明を入力してください

編集：多分このimgはあなたにもっと教えてくれるでしょう、私がやりたいこと（上記）

4

1 に答える 1

1 
background-color: transparent;

あなたはそれを試しましたか？

編集

http://jsfiddle.net/FCXGu/3/

border-width: 20px;
border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-moz-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-webkit-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;

これがどのように機能するかを理解するには少し時間がかかります。画像の境界線は、一般に通常より太いため、基本的に「パディング」のように機能します。カットアウトの境界線の上部を太くするだけだと考えることができます。その場合、コードは次のようになります。

 border-image: url("//i.imgur.com/hg2Thfa.png") 20 0 0 0 stretch;

これは、div の上部の境界線を意味し、使用している画像の上部 20 ピクセルを使用し、画像の残りの部分は div のコンテンツ領域で使用されます。いずれにせよ、必要な効果は border-image で実現できます。

それは最善の方法/唯一の方法ですか？おそらくそうではありませんが、それは1つの方法です。

これがフィドルです：http://jsfiddle.net/FCXGu/3/

すべてがどこにあるかを説明するために、コンテンツ領域を追加しました: http://jsfiddle.net/FCXGu/4/

正確な画像、ページ、および使用状況を確認しないと、png を作成する最善の方法、ストレッチと繰り返しの使用などを説明できませんでした。しかし、border-image は非常に柔軟です。ただし、すべてのブラウザで機能するわけではありません。良いものばかり。

于 2013-02-24T19:48:29.043 に答える