Маска границы с прозрачным png?

Question

Я ломаю голову над этим и не могу найти решение.

Концептуально, мысль состоит в том, чтобы:

• иметь div с фоновым изображением дома и копировать
• :: элемент before для границы
• :: after для логотипа

Проблема заключается в маскировке логотипа границы.

НасколькоЯ знаю, что это невозможно.Любые идеи (должна иметь достойную поддержку браузера)?

Код макета:

.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

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

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

Answer 2

Согласно моему комментарию, я бы использовал элемент после и до - ниже я добавил блок div и стилизовал его как

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

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

Answer 3

Надеюсь, это то, что вы хотите

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

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

Answer 4

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 5

Вы можете использовать, как <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>

Возможно, вам придется скорректировать числа, но это должно работать с минимальными изменениями.