border-image > 内容后面的半透明 png

Question

我有一个照片库，我为其创建了一个框架，顶部有一点透明胶带。我希望它看起来像贴在我背景上的宝丽来照片。磁带完美地贴在背景上，但我希望它也出现在图片前面。我在图片上使用负边距以使其与框架重叠。不幸的是，这张照片似乎在我的相框前面。

在此先感谢互联网的代码大神。

这是我的 HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body {
 background: black;
    background-repeat:   repeat;
    background-position: left top; 
   background-image: url("http://moof-it.com/testing/body_bg.jpg"); 
    background-attachment: fixed;
}
.galleryspace{
 display:inline-block;
 padding:15px;
 margin:0px;
}
.galleryframe {
 display:block;
 text-align:center;
 vertical-align:top;
 margin:0px;
 padding:0px;
 border-color: white;
 border-style:solid;
 border-width:28px 10px 10px 10px;
 -webkit-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
    -o-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
    border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
}
.imageingallery {
 display:block;
 background:white;
}
.imageingallery img{
 height:240px;
 margin:-12px -3px -1px -1px;
 padding:0px;
}
.imageingallery a {
 text-decoration:none;
 font-size:14px;
 font-variant:small-caps;
    color: #C27890; 
}
</style>
</head>
<body>
<div class='galleryspace'>
 <center>
 <div class='galleryframe'>
  <div class='imageingallery'>
   <a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
   <img src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
   <br>
   A Little Spell
   </a>
  </div>
 </div>
  </center>
</div>
</body>
</html>

Answer 1

我建议您不要为此使用 border-image，而是将磁带制作成单独的图像并按您想要的方式放置。这是我的意思的一个例子。请注意，我无法单独访问您的磁带图像，所以我只是制作了一个红色块。您可以将其替换为磁带的图像。

html,
body {
  background: black;
  background-repeat: repeat;
  background-position: left top;
  background-image: url("http://moof-it.com/testing/body_bg.jpg");
  background-attachment: fixed;
}

.galleryspace {
  display: inline-block;
  padding: 15px;
  margin: 0px;
}

.galleryframe {
  display: block;
  text-align: center;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  border-color: white;
  border-style: solid;
  border-width: 20px 10px 10px 10px;
}

.imageingallery {
  display: block;
  background: white;
}

.imageingallery .image {
  height: 240px;
  margin: -12px -3px -1px -1px;
  padding: 0px;
}

.imageingallery a {
  text-decoration: none;
  font-size: 14px;
  font-variant: small-caps;
  color: #C27890;
  display: block;
  position: relative;
}

.blockOver {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: -40px auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>
  <div class='galleryspace'>
    <center>
      <div class='galleryframe'>
        <div class='imageingallery'>
          <a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
            <img class="blockOver" src="http://via.placeholder.com/50x50/ff0000">
            <img class="image" src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
            <br> A Little Spell
          </a>
        </div>
      </div>
    </center>
  </div>
</body>

</html>

border-image > 内容后面的半透明 png

border-image > Semi transparent png behind contents

css

border-image