Mask border with transparent png?

  • A+
Category:Languages

Racking my brain over this and can't come up with a solution.

Conceptually, the thought is to:

  • have a div with background image of house and copy
  • ::before element for border
  • ::after for logo

Problem is the logo masking of the border.

As far as I know this isn't possible. Any ideas (must have decent browser support)?

Mask border with transparent png?

Mockup code:

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

 


Try this it's very essay  <div>  <fieldset>   <legend align="right"><img src="http://www.technozion.org/tz15/assets/mat/images/generic-logo.png" alt="Mask border with transparent 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/

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: