html - 縁取り画像の設定に苦労する

Question

非常に複雑な境界線画像を自分の Web サイトに設定しようとしています。実際にはスライドの境界線であり、スライドのコンテンツは実際にスライドするときに境界線の下に移動する必要があるため、背景画像にすることはできません。背景画像では、コンテンツがその上に移動すると想定しています。

したがって、基本的には、これを div の境界イメージにする方法が必要です。または、これを境界にするより良いアプローチがある場合は、お知らせください。

ありがとうございました。

Answer 1

透明なpng画像を行うことはhtmlではありません。PhotoshopやGimpなどのソフトウェアで行う必要があります。それ以外の場合は、divをいじって行うことができます

Answer 2

前後の疑似要素を使用して、通常とは異なる「境界線」を背景画像として添付できます。

div.slide {
    background: yellow;
    position: relative;
}

div.slide:before {
    display:  block;
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(slide-bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}

http://jsfiddle.net/kTgJJ/

デモでは不透明から透明へのグラデーションを使用しているため、効果を確認できます。画像には、テキストが透けて見える透明な領域と、透けてはいけない不透明な領域が必要です。必要に応じてパディングを追加.slideします。

Answer 3

<style>
    .screen {
        height: 422px;  
        width: 820px;       
    }
    .back {
        position: absolute;
        height: 422px;      
        width: 820px;       
        background-image:url('test.png');
    }
    .content {
        position: absolute;
        height: 320px;
        width: 672px;
        margin-left: 73px;
        margin-top: 56px;
        border-radius: 50px;
        overflow:hidden;
    }
</style>
<div class="screen" >
    <div class="content" >
        put here what ever you want to put inside
    </div>
    <div class="back" ></div>
</div>

これはあなたのイメージで私と一緒に働きます