html - 很难设置边框图像

Question

我正在尝试为我的网站设置一个相当复杂的边框图像。我不能将其设置为背景图像，因为它实际上是幻灯片的边框，并且幻灯片内容在实际滑动时必须位于边框下方，而对于背景图像，我假设内容只会在其上方。

所以，基本上我需要帮助如何使它成为一个 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>

用你的形象和我一起工作