0

ページに画像があり、エッジが粗くて破れているように見え、内側の影がページのくぼみのように見えます。その上にあるコンテンツが、表示されている画像の外側に出ることなく、画像の端の下をスクロールするようにしたいのです。画像はPNGで、破れた効果の周りは透明ですが、それでも背景の下に隠すことができません。

http://kellygoekenphotography.com/portfolio.php

4

3 に答える 3

1

もうすぐそこにいるようです。

cotext divの場合は、上から20pxの位置に配置してみてください。

<div id="cotext" style="position:relative;top:20px;">

この方法でよりよくフィットするはずです。

于 2013-02-11T22:56:59.230 に答える
0

この行を置き換えます

<div id="content">

これとともに

<div id="content" style="margin-top: 22px;">
于 2013-02-11T22:53:39.073 に答える
0

問題は、画像が1つしかないことです。透明であるかどうかは、テキストの下にあるため、影響はありません（そうでない場合は、テキストを表示できません）。あなたがしたいのはそれを2つの画像に分けることです。1つは背景（銀色の光沢のある部分）だけで、もう1つは破れた部分と透明な中心だけです。次に、背景画像をテキストの下に配置し、切り抜き画像をテキストの上に配置します（z-index内）。

編集：

OK、背景画像の外側が透明になっていることに気づきませんでした。あなたがしたいことはこれです：

  • 背景画像をそのまま保持する
  • 元の画像ファイル（私はPhotoshopを想定しています）を取り、外側を透明ではなく白にします。
  • 次に、中央を取り、代わりにそれを透明にします。したがって、必要なのはその周りの白いフレームだけです。
  • レイヤー効果を取り除く
  • その画像を前景として保存します
  • 元のテキストと同じように、背景の上にテキストをスクロールさせます
  • この新しい画像を、背景画像とまったく同じ場所のその領域の真上に配置します

Edit2：

あなたのページの背景が白ではないので、それもうまくいかないことに気づきましたが、それはある種の波状のものを持っています。したがって、私は別の代替案を考えました。

BG画像は、その上にレイヤー効果のない銀色の背景になります。しかし、昔ながらの普通のシルバーの部分だけが、現在のようにその周りの透明な境界線を維持しています。

上の画像は、銀色の部分のない透明な背景のレイヤー効果のみになります。この画像でも、画像の周囲に透明な境界線を維持するようにしてください。

このようにすると、テキストはシャドウエフェクトの下に配置されるため、上部をスクロールすると、突然のカットラインがそれほどはっきりしなくなります。あなたはおそらくそれを少し見るでしょう、しかしそれは少なくとも効果を最小にするでしょう。もちろん、シャドウ効果は画像やテキストの上にもあるので、この解決策も気に入らないかもしれません。

于 2013-02-11T23:04:19.540 に答える