2

私のクライアントがこれを望んでいるので、誰かがこの質問に答えてくれることを願っています。現在、これをcssで構築する方法がわかりません。

このようなものを構築する方法を知っている人はいますか? 画像を右に揃えると、テキストが画像にうまく配置されます。

ここで私がやりたいことは、div を作成して、入力されたすべてのテキストの周りに境界線を作成し、それを画像に合わせることです。どうすればこれを行うことができますか?

ピートの助けの後。

ここでの問題は、

box-shadow

また、ボックスはステージの後半で透明にする必要があります。これは今の私の結果http://jsfiddle.net/peteng/cu59r/です。

編集：このcssの問題を解決するのに役立つすべての回答とサポートに感謝します。

発生するはずの次のことは次のとおりです。

  1. 写真を見てください。
  2. 私が投稿したjsfiddleリンクを参照してください。
  3. 境界線のあるコンテンツには、ボックス シャドウ、境界線の半径、およびグラデーションが必要です。
  4. これは動的である必要があります。

そして、私を助けてくれたコミュニティにもう一度感謝します。

4

7 に答える 7

1

このようにテキスト ボックスのスタイルを設定する簡単な方法はないと思います。

私の提案: Photoshop でボックスをデザインし、それを背景画像として 2 つの異なる div に追加します (テキスト ボックスには、画像があるべき場所に透明な背景が必要です)。この後、必要に応じてラッパー div を使用して、適切な方法で div を配置します。

短所: 応答しない、静的など

于 2013-06-14T08:32:27.757 に答える
0

Skull3r7 はbackground-images について良いアイデアを思いつきました。さらに、2 つの div を (動的) テキストで使用し、もう 1 つを「上部境界線」で使用することができます。

  • レイヤー 1 には、テキストが「プレースホルダー」と「下枠」として含まれています。
  • レイヤー 2 には「トップ ボーダー イメージ」が含まれます (レイヤー 1 の上部をカバーします)。
  • レイヤー 3 には、可視テキストが含まれています。

例

ただし、Pete のソリューションを実装する方が簡単ですが、この例も役立つことを願っています。:)

于 2013-06-14T09:55:46.180 に答える
0

画像を浮かせるだけで、次のようになります: http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif

追加するだけ

float: right/left;
margin: 0;

それが機能するかどうかを確認してください。

于 2013-06-14T08:47:23.877 に答える
0

これは私の意見では非常に良い質問です:)

私の短い答えは - はい、可能です -ピートの答えを参照してください。私は状況の難しさを理解しています。また、この種のソリューションは cssborder-radiusと画像を組み合わせているため、柔軟性に欠けているという事実も理解しています。つまり => a) IE8 以下では奇妙に見えます。いくつかのCSSを変更してください:)

私自身の答えは、それを行うためだけに css を使用することですが、主な問題は解決されず、画像に近い角は、私が認識している css では決して丸められません。

このフィドルを見ることを検討してください - http://jsfiddle.net/skip405/m6cpb/1/

少し柔軟なので、変更が必要な場合は、cssのみが変更され、別の色や異なる半径の画像を再作成する必要はありません...画像はまったく必要ありません: ) ただし、左に浮いた画像と、テキストの中央にある画像のスタイルを変える必要があります。

于 2013-06-14T09:48:17.230 に答える