很难设置边框图像答案

【问题标题】：Having hard time setting a border image很难设置边框图像
【发布时间】：2013-01-03 13:56:50
【问题描述】：

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

所以，基本上我需要帮助如何将其设为 div 的边框图像。或者如果有更好的方法然后将其作为边界，请告诉我。

谢谢。

【问题讨论】：

右下角不能使用纯 CSS。我建议制作一个透明的 .png 并将 z-index 设置为高于内容
因为我不是一个优秀的设计师，我真的需要一个关于一切的例子。 :\
你不会在stackoverflow上找到愿意为你免费设计的人

标签： html css slider border slideshow

【解决方案1】：

transparet png 图像不是 html，您需要使用 Photoshop 或 Gimp 等软件来完成，否则您可以使用 div 来完成此操作

【讨论】：

【解决方案2】：

<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>

你的图片和我一起工作

【讨论】：

【解决方案3】：

您可以使用 before/after 伪元素将您不寻常的“边框”附加为背景图像。

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 添加填充。

【讨论】：