3

内側のボックスを透明にして、画像を不透明にせずに（鮮明な画像）、外側のボックスの残りの部分を不透明にするための最良の方法（ある場合）は何ですか。これまでのところ、これは私がしていることです：

<style>
#a {
  background-color: black;
  float: left;
} #b {
    opacity : 0.4;
    filter: alpha(opacity=40); 
} #div {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 90px;
    left: 90px;
    border: 1px solid #FFF;
    background: transparent;
}
</style>

<div id="a">
  <div id="b">    
    <img src="http://clagnut.com/images/ithaka.jpg" />
  </div>
</div>
<div id="div"></div>

何か案は？どうも

4

4 に答える 4

7

要素の最大不透明度は、その親要素の不透明度です。したがって、div#b の不透明度が 40% の場合、その子のスタイルの不透明度が 100% の場合、絶対不透明度も 40% になります。

あなたが説明していること（少なくとも私があなたが説明していると思うこと）を達成するために、1つの方法は、相対位置を持つ親divの透明なラッパーと画像の子の両方を持つことです。画像が透明なボックスの上に表示されるように、そのラッパー内に両方の子を絶対に配置できます。

編集：これは、説明している効果のコードです。私の例には、480 x 320 の画像と 30 ピクセルの境界線があります。

<style>
    #back {background-image:url(mypicture.jpg);
               width:480px;
               height:320px;
               position:relative;}
    #middle {position:absolute;
                 width:480px;
                 height:320px;
                 background-color:#000;
                 opacity:0.4;
                 filter:alpha(opacity=40);
                 top:0;
                 left:0;}
    #front {position:absolute;
                width:420px; /* 30px border on left & right */
                height:260px; /* 30px border on top & bottom */
                background-image:url(mypicture.jpg);
                background-position:-30px -30px; /* compensate for the border */
                top:30px;
                left:30px;}
</style>

<div id="back">
    <div id="middle">
    </div>
    <div id="front">
    </div>
</div>
于 2009-02-08T02:43:16.750 に答える
2

私が正しく理解している場合は、div を 1 つだけ使用して (つまり、ID "a" の外側の div を削除して)、その周りに色付きの境界線を設定してみてください。または、左、右、上、下の端に 4 つの div を使用し、角にさらに 4 つの div を使用して境界線を「偽造」することで、より柔軟性を高めることができます。

例のページや、期待するものと実際に得られるもののスクリーンショットがなければ、あなたが何を意味するのかを知るのはちょっと難しいです.

EDIT : 基本的に Rex M が書いたものと同じものを編集しようとしていました。これを行う別の方法を次に示します (理想的には劣りますが)。

<style>
#a {
    float: left;
    position: relative;
}
div.overlay {
    opacity: 0.4;
    background-color: black;
    position: absolute;
}
#t {
    left: 0; top: 0; height: 90px; width: 450px;
}
#b {
    left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
    left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
    left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
    <div id="t" class="overlay"></div>
    <div id="b" class="overlay"></div>
    <div id="l" class="overlay"></div>
    <div id="r" class="overlay"></div>
    <img src="http://clagnut.com/images/ithaka.jpg">
</div>
于 2009-02-08T02:48:28.800 に答える
0

Rex Mの発言に従うには、非透明要素が透明要素の子にならないように変更する必要があります。

絶対位置または相対位置を使用して、「境界線」を画像に合わせることができますが、ブラウザ間で矛盾が生じることがよくあります。

私の頭の上の最も簡単な方法は、javascriptを使用して画像の上と左のピクセル位置を取得し、境界線の上/左のcssプロパティを一致するように設定することです(そして境界線のサイズを画像）。

アップデート：

質問者は、彼が再現しようとしているものの例を示しました。リンクされた例では、画像の影付きの領域 (「選択されていない」領域) は 4 つの div によって作成されます。

上部と下部の div は画像の全幅であり、それぞれ選択ボックスの上部/下部と画像の上部/下部の差である高さを持つように設定されています。

サイド div は、画像の「サイド エリア」を埋めるように高さと幅が変更されています。

サイズは、mousemove イベントによって更新されます。

于 2009-02-08T02:49:04.070 に答える
0

画像の背景に特定の色を確実に使用したい場合は、スタイルシートのすべての IMG 要素に背景を貼り付けることもできます。

div#a img { background: #FFF; }

とにかく、CSS の filter-property は、CSS 2.1 の公式仕様の一部ではないため、依存するべきではありません。

質問を誤解していたかもしれませんが。言い換えるか、期待される結果の写真を提供していただけますか?

于 2009-02-08T02:49:52.447 に答える