1

次のケースがあります（同じスペースを節約するために、HTML内にCSSをネストします）：

<body style="background: url('someimage.png')">
   <div style="background: white">
      <header style="opacity:0.6">
      </header>
      <article></article>
   </div>
</body>

divの背景ではなく、体の背景に対して不透明度が機能するようにします。また、div の背景を透明にする方法はありません。下の画像のような効果を探しています。画像の背景を持つ本文があり、次にヘッダー、記事、および含まれていない他の多くのものを含むdivがありますが、メインのdivには背景が白で、ヘッダーに本文の背景からのこの透明な効果を持たせたい. 同時に、私はレスポンシブなソリューションを探しているので、フォトショップは役に立ちません (私は思う)。

ヘッダーと記事は単一の div でラップされます

何を提案するつもりですか？ありがとう。

これがワードペスのテーマであり、HTML 構造を台無しにしたくないという主な問題は、CSS ソリューションが必要です。

4

1 に答える 1

2

スタイリングに関する限り、次のものをarticle別々に扱いheaderます。

<body style="background: url('someimage.png')">
    <div>
        <header style="background:rgba(0,0,0,0.6);border-radius:5px;">
        </header>
        <article style="background: white">
        </article>
    </div>
</body>

質問編集前の元の回答:

に適用opacity:0.6する<header>と<header>、 とそのすべての子が透明になります。解決策ではありません。

に適用opacity:0.6する<body>と、そのすべての子も透明になります。解決策ではありません。

解決策: CSS で使用する前に、透明度をsomeimage.png画像内に埋め込まれたアルファ チャネルとして追加します。

于 2013-09-23T22:36:17.127 に答える