3

Web サイトを作成するとき、私はしばしば透明な png ( http://www.noisetexturegenerator.com/で作成された fi ) を使用して、デザインをよりマテリアルでリアルな外観にします。

現在、ボーダーを多用したデザインを進めているので、同じようにテクスチャを追加できないかと考えました。(実線の境界線を定義し、それを png で上書きします (png は透明であるため、以前に指定された単色に適応する必要があります))

border-image私の知る限り、ブラウザは単色を無視するため、この方法では実行できません。（この目的のために、固定色のボーダー画像を設定しないことをお勧めします）

ネストされた div を使用してジョブを実行することもできますが、それはセマンティックではなく、いくつかの Joomla ビューを変更する必要があります。

さらに、100x100px の png (背景と同じ) があると仮定します。サイズを変更せずにプロポーションを維持したり、境界線が予期しない遷移 (パターンの配置ミスによる架空の線など) を取得したりしないように設定するにはどうすればよいでしょうか?

とにかく、誰か他の提案がありますか？(CSS ノイズの多い境界線)

4

2 に答える 2

2

で無地の色を使用する場合は、backgroundで簡単に描画できますがbox-shadow:inset、ノイズの多い背景と透明な境界線を設定して下に表示します。http://codepen.io/gc-nomade/pen/vEemwb

背景が画像の場合は、background-clip役立ちます。 http://codepen.io/gc-nomade/pen/vEemqP

どちらの例も、背景画像に設定された透明な境界線とノイズの多いパターンでリレーします。

于 2015-02-02T20:58:05.340 に答える
0

beforeまたは疑似要素を使用afterして、元の要素に画像を配置し、疑似に単色を配置できます（またはその逆）。

このようなもの (不透明なパターンを使用: http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif ):

div {
  width: 100px;
  height: 100px;
  border-width: 24px;
  border-image: url(http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif) 24 repeat;
}
div:after {
  content: "";
  width: 100px;
  height: 100px;
  border: 24px solid rgba(0, 255, 255, .8);
  display: block;
  margin: -24px;
}
<div></div>

このようにして、幅、不透明度、位置を簡単に制御できます。に設定すると、予期しない遷移についても心配する必要はありませんrepeat。

于 2015-02-02T20:47:24.103 に答える