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＆gt;内容

1 个答案: