9

特定の位置にいくつかのボックスメッセージを重ねたい背景画像があります。ボックスを画像に貼り付けて、画像に合わせて拡大縮小し、正確な位置を維持する方法はありますか? おそらく、ボックス内のテキストのフォントサイズもスケーリングする必要があります。

別のメモとして、ボックスに影響を与えずに背景の不透明度を変更するにはどうすればよいですか。

ここに jsfiddle へのリンクがあります: http://jsfiddle.net/zd3CA/

更新パスの特定の部分にボックスを配置して、 結果を次のように表示したい。画像のサイズが変更されると、ボックスが動き回ります。はっきりしなかったようです。

CSS

.back {
    height: 85em;
    margin-bottom: 5em;
    background: url(http://kpv.s3.amazonaws.com/static/img/film.jpg) no-repeat;
    background-size: contain;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.box-message {
    max-width: 15em;
    min-height: 10em;
    box-sizing: border-box;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.11), -1px 0 3px rgba(0, 0, 0, 0.11);
    background: #fff;
    color:#000;
    padding: 25px 25px 35px 25px;
    position: relative;
}
.flow_three {
    margin-top: 3em;
    margin-left: 5em;
}
.flow_two {
    margin-top: 3em;
    margin-left: 10em;
}
.flow_text h3 {
    color: #1BB366;
    font-size: 20px;
}
.flow_text p {
    font-size: 18px;
    line-height: 25px;
}
.back .container {
    position: relative;
    z-index: 2;
}
.container {
    width: 940px;
}

HTML

<div class="back">
    <div class="container">
        <div class="box-message flow_text flow_three">
             <h3>text</h3>

            <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
        </div>
        <div class="box-message flow_text flow_two">
             <h3>text</h3>

            <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
        </div>
    </div>
</div>
4

9 に答える 9

1

フォームの背景画像が必要だと言っている場合は、css を介して背景画像を適用するだけです。js を介してアニメーションを適用する予定がない限り、背景としてフォームの背後に要素を作成する理由はありません。それでも、AS2/AS3 を使用することをお勧めします。

だから、私が言ったように、CSSを介してフォームの背景画像を使用してください。

于 2013-09-01T00:39:00.353 に答える
1

画像を 'background-image' として相対的に配置された (親) コンテナー要素に適用し、' background-size ' を 'contain' に設定するだけです (既に行ったように)。

（子）ボックスをパーセンテージ幅の値で定義し、それらの位置のパーセンテージ（相対）値でも絶対に配置するとします。全体が完全に拡大縮小する必要があります。

于 2013-09-01T12:57:11.373 に答える
1

ソリューションは、% や em などの流体単位を使用し、絶対位置を使用して可能です。

スタイルは次のとおりです。

*,html{
margin:0px;
padding:0px;
}
.back {
   height: 51em;
   margin-bottom: 5em;
   background: url(http://kpv.s3.amazonaws.com/static/img/film.jpg) no-repeat;
   background-size: contain;
   color: #ffffff;
   text-shadow: 1px 1px 1px #000000;
   width: 60%;
  }
  .back .container {
   position: relative;
   z-index: 2;
  }
  .container {
    width: 100%;
    height: 100%;
   }
  .box-message {

    box-sizing: border-box;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.11), -1px 0 3px rgba(0, 0, 0, 0.11);
    background: #fff;
    color: #000;
    padding: 1% 2%;
   width: 26.66%;
  }
  .flow_three {
    margin-top: 5%;
    margin-left: 5%;
    position: absolute;
  }
  .flow_two {
  margin-top: 1%;
  float: right;
  right: 2%;
  position: absolute;
  }
  .flow_center{
  position: absolute;
  margin-top: 26%;
  margin-left: 44%;
  }
  .flow_text h3 {
   color: #1BB366; 
   font-size: 1.25em;
   }
   .flow_text p {
     font-size: 1.125em;
     line-height: 95%;
    }

htmlは

<div class="back">
<div class="container">
    <div class="box-message flow_text flow_three">
         <h3>text</h3>

        <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
    </div>
    <div class="box-message flow_text flow_two">
         <h3>text</h3>

        <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
    </div>
    <div class="box-message flow_text flow_center">
         <h3>text</h3>

        <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
    </div>
    </div>
 </div>
于 2013-09-02T08:02:23.020 に答える
0

目的の結果を得るには、まず画像が.box-message要素と同じ空間参照 (座標系など) を共有する必要があります。これは、画像をタグに配置し、.box-message要素の兄弟にすることで実現されます。親の高さと幅を定義する唯一の子要素にする必要もあります。これを行うには、.box-message要素を親に対する絶対位置で設定し、画像widthを 100% に設定します。これにより、画像は親コンテナに合わせてサイズ変更でき、縦横比を維持できます。

要素の絶対配置により、およびプロパティ.box-messageを使用して、画像に対する座標を設定します。これにより、要素の左上隅が画像の特定のポイントに固定されます。要素を中心点から固定するには、プロパティを追加できます。要素に最小/最大の幅/高さのプロパティを設定したり、画像に合わせてサイズを変更したりすることもできます。topleft.box-message.box-messagetransform: translate3d(-50%,-50%,0);.box-message

vw最後に、ビューポート単位 (および/または)でサイズを指定することにより、font-size を調整できますvh。このチュートリアルと例を確認してください: http://css-tricks.com/examples/ViewportTypography/

ビューポートが調整されるたびに、それに応じてフォントサイズが変更されます。

この Fiddle の例を確認してください: http://jsfiddle.net/3wq25/1/

于 2013-09-02T00:43:43.633 に答える
0

これは、lettering.js で行います。http://letteringjs.com/

デフォルトのテキスト サイズを設定し、パディングを追加してボックス サイズを相対的に維持します。

どちらも簡単にスケーリングできるはずです。

于 2013-09-05T19:22:51.627 に答える
-1

だから... 誰もそれがこんなに簡単だと気づいていないの？

CSS:

.img {
background-image:url('image.jpg');
width: 100%;
height: 200px;
padding: 200px;
margin: 0px;
}

HTML:

<table class="img"><tr><td>

<h1>Text Here</h1>

<h3>Text Here</h3>

</td></tr></table>
于 2013-09-03T13:25:26.753 に答える