1

これが、これまでのところ役に立たずに達成しようとしていることです。

  1. ボディの背景には粒子が含まれている必要があります。

  2. 中央の画像内では、背景は白にする必要があります。

  3. 赤い部分が浮き上がって形が埋まるはずなので、中央の画像は背景を透明にする必要があります。

一部のJavaScriptの塗りつぶしについては尋ねていません。css部分を達成できるかどうか疑問に思っています。

手がかりはありますか？

サンプルは次のとおりです。

html:

 <body>
    <div>
        <hr/>
        <div class="ornament"></div>
    </div>
</body>

CSS:

body {
margin-top: 100px; 
background: url('http://hostmypicture.com/images/fundokairo.png') repeat;
}

hr {
    height: 2px;
    color: #578daf;
    background-color: #578daf;
    border: 0;
    padding: 0; 
    margin: 9px 0 0 0;
}

.ornament {
    width: 169px;
    height: 169px;
    background: url('http://s23.postimg.org/mtc0673xj/mascara_Kairos.png') 0 50%;
    margin: -84px auto 0 auto;
}

http://jsfiddle.net/9EFdF/

4

2 に答える 2

-1

つまり、基本的には 3 Div です。

<div style="position:relative;background-color:white;width:200px;height:200px">
  <div style="background-color:red;height:100px;width:200px;bottom:0;position:absolute;z-index:10"></div>
  <div style="position:absolute;background-image:shape.png;width:200px;height:200px;z-index:20"></div>
</div>
于 2013-07-18T11:48:23.050 に答える