html - 带有透明png的蒙版边框？

Question

为此绞尽脑汁想不出解决办法。

从概念上讲，思想是:

• 有一个带有房子和副本背景图片的div
• ::在边框元素之前
• ::标志之后

问题是边框的 Logo mask 。

据我所知这是不可能的。有什么想法(必须有良好的浏览器支持)？

模型代码:

.hero-banner {
  width: 100%;
  height: 40vw;
  background-image: url('https://i.imgur.com/Ft1XsIn.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  padding: 0;
  position: relative;
}

.hero-banner h1 {
  color: #fff;
  position: absolute;
  top: 40%;
  left: 200px;
}

.hero-banner h1 small {}

.hero-banner::after {
  content: "";
  position: absolute;
  top: 70px;
  right: 70px;
  bottom: 70px;
  left: 70px;
  border: 1px solid #fff;
}

.hero-banner::before {
  content: url('http://www.technozion.org/tz15/assets/mat/images/generic-logo.png');
  position: absolute;
  top: 10px;
  right: 150px;
  height: 122px;
  width: 300px;
}

<div class="hero-banner">
  <h1><small>The Story of</small><br/>This House</h1>
</div>

Answer 1

Try this it's very essay

<div>
 <fieldset>
  <legend align="right"><img src="http://www.technozion.org/tz15/assets/mat/images/generic-logo.png"></legend>
  <p>some text here</p>
 </fieldset>
</div>
<style>
div{padding:30px;background: url(https://i.imgur.com/Ft1XsIn.jpg) no-repeat  center center;
background-size: cover;}

fieldset{border:2px solid #fff;padding:10px;}
legend img{
 width:100px;

}
</style>

https://jsfiddle.net/renukaSingh/g1n6ugyq/