面具边框透明png？

Question

将我的大脑放在这上面并且无法提出解决方案。

从概念上讲，这个想法是：

• 有一个div与背景图像的房子和副本
• :: before border for border
• :: after for logo

问题是边框的徽标遮挡。

据我所知，这是不可能的。任何想法（必须有适当的浏览器支持）？

样机代码：

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

Answer 2

你可以利用<fieldset><legend>如何完成这种边界的“切割”。

.hero-banner {
  background-image: url('https://i.imgur.com/Ft1XsIn.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}

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

.hero-banner>fieldset {
  margin: 70px;
  height: 30vh;
  border: 1px solid #fff;
}

.hero-banner>fieldset>legend {
  margin-left: auto;
  margin-right: 40px;
}

<div class="hero-banner">
  <fieldset>
    <legend><img src="http://www.technozion.org/tz15/assets/mat/images/generic-logo.png" /></legend>
    <h1><small>The Story of</small><br/>This House</h1>
  </fieldset>
</div>

您可能需要调整数字，但这应该适用于最小化。

Answer 3

我希望你想要的是

＆＃13;

＆＃13;

.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;
  background-color: #ccc
}
.hero-banner h1 {
  color:#fff;
  position: absolute;
  top: 40%;
  left: 200px;
}
.hero-banner h1 small {}
.border {
  position: absolute;
  top: 70px;
  right: 70px;
  bottom: 70px;
  left: 70px;
  border: 1px solid #fff;
  border-top: 0;
}

.top-left {
  border-top: 1px solid #fff;
  width: calc(100% - 400px);
}

.top-right {
  border-top: 1px solid #fff;
  width: 50px;
  right: 0;
  position: absolute;
}

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

根据我的评论，我会使用一个after和before元素 - 下面我添加了一个盒子div并设置了样式

＆＃13;

＆＃13;

.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;
  background-color: blue;      /* for my test as imiur is blocked */
  margin: 0;
  padding: 0;
  position: relative;
}

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

.box {
  position: absolute;
  /* use rgba colour for opacity */
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 0;
  top: 40px;
  left: 40px;
  bottom: 40px;
  right: 40px;
}

.box:after {
  content: '';
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  left: calc(100% - 100px);
  /* the minus number is where you want it to stop from the right */
}

.box:before {
  content: '';
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 450px;  /* width of logo plus amount of space on right */
}

.hero-banner::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 150px;
  height: 122px;
  width: 300px;
  background: url('http://www.technozion.org/tz15/assets/mat/images/generic-logo.png') left top no-repeat;
  background-size: cover;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

＆＃13;

＆＃13;

.logo-container {
  top: 3.2em;
  right: 8em;
}

.p-ltrb-5 {
  left: 5em;
  top: 5em;
  right: 5em;
  bottom: 5em;
}

.outline {
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}

.outline:before,
.outline:after {
  content: "";
  position: absolute;
  height: 1px;
  content: "";
  position: absolute;
}

.outline:before {
  left: 0;
  border-top: 1px solid #fff;
  border-right: 30px solid #fff;
  width: 80%
}

.outline:after {
  content: "";
  position: absolute;
  height: 1px;
  right: 0;
  border-right: 30px solid #fff;
  width: 2%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col p-0 position-relative">
      <div class="position-absolute  p-ltrb-5">
        <div class="h-100 w-10 outline">

        </div>
      </div>
      <div class="position-absolute bg-primary  logo-container">
        <div class="h-100 px-5 py-3 w-100">
          Logo
        </div>
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Brooklyn_Bridge_Postdlf.jpg" alt="" class="img-fluid">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;