How to opacify only the background outline? - html

Question

I want to opacify just the outline of the background, that small part between the yellow container and the end of the VP. Could you please help me? Thank you.
HTML
`e
.menu-jumbotron {
background: #160b00;
background-image: url("/Users/Desktop/PROJECTS/STELLINA 2/images/food-img.jpg");
background-size: cover;
max-width: 100%;
}
.jumbotron-form {
background: #160b00 !important;
}
.border {
width: 100%;
height: 40.58rem;
border: 2px solid #fed675 !important;
}
.opacity-bg {
width: 65%;
height: 100%;
background: rgba(22, 11, 0, 0.9);
}
<section class="welcome-section">
<div class="jumbotron menu-jumbotron jumbotron-fluid">
<div class="container menu-container">
<div class="border">
<div class="opacity-bg">
<div class="headers">
<h3 class="inner-text small">vieni a trovarci</h3>
<h1 class="header display-4">Etoile Food Bar & Cocktails</h1>
</div>
<div class="phone-number-outer">
<div class="phone-number-inner">
<p>123-456789</p>
</div>
</div>
<div class="menu-button">
<button type="button" class="menu-btn btn btn-primary button-wrapper">Scopri il nostro menu</button>
</div>
</div>
</div>
</div>
</div>
</section>
Background that I want to opacify`

Answer 1

Is this what you try to achieve?
.menu-jumbotron {
background-color: #c7731f;
background-image: url('https://via.placeholder.com/1000x1000.jpg');
background-size: cover;
max-width: 100%;
}
.jumbotron-form {
background: #160b00 !important;
}
.border {
display: flex;
width: 100%;
height: 40.58rem;
border: 2px solid #fed675 !important;
}
.opacity-bg {
width: 65%;
height: 100%;
background: rgba(22, 11, 0, 0.5);
}
<section class="welcome-section">
<div class="jumbotron menu-jumbotron jumbotron-fluid">
<div class="container menu-container">
<div class="border">
<div class="opacity-bg">
<div class="headers">
<h3 class="inner-text small">vieni a trovarci</h3>
<h1 class="header display-4">Etoile Food Bar & Cocktails</h1>
</div>
<div class="phone-number-outer">
<div class="phone-number-inner">
<p>123-456789</p>
</div>
</div>
<div class="menu-button">
<button type="button" class="menu-btn btn btn-primary button-wrapper">Scopri il nostro menu</button>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 2

This was an interesting problem to tackle. I came up with two possible ideas: one is somewhat complex but uses true opacity, and the other is simpler but uses a trick to fake opacity.
True Opacity Solution
The idea is to use two background images. The first one will have opacity applied to it, and the other will not. Two images are required since, to my knowledge, you can't apply opacity to just part of the image.
* {
margin: 0;
}
section.welcome {
--padding: 3em;
--border-width: 0.25em;
position: relative;
padding: var(--padding);
}
.bg {
position: absolute;
background-image: url('https://wallpapercave.com/wp/1OXITrf.jpg');
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
section.welcome > .bg {
opacity: 0.25;
}
.inner {
position: relative;
border: var(--border-width) solid red;
overflow: hidden;
}
.inner .bg {
background-position: calc(var(--padding) * -1 - var(--border-width)) calc(var(--padding) * -1 - var(--border-width));
width: calc(100% + 2 * var(--padding) + 2 * var(--border-width));
}
.content {
color: #fff;
background: rgba(0, 0, 0, 0.75);
min-height: 10em;
width: 65%;
}
<section class="welcome">
<div class="bg"></div>
<div class="inner">
<div class="bg"></div>
<div class="content">
<p>Hello world</p>
</div>
</div>
</section>
The trickiest bit is getting the images to align. Since there are two background images at play, in order for the effect to look cohesive, background-position must be carefully calculated so it aligns with the opacity-ified image.
The key line, which moves the inner image backwards by an amount equal to the welcome sections padding and the content's border width:
background-position: calc(var(--padding) * -1 - var(--border-width)) calc(var(--padding) * -1 - var(--border-width));
Using Shadow to Fake Opacity
Opacity is used to allow part of the background to show through. If you know that the background is white or some other color, then you can fake opacity by using box-shadow. This solution is simpler since it only requires one background image now, but you still want to calculate the size of the shadow for best effect.
* {
margin: 0;
}
section.welcome {
--padding: 3em;
--border-width: 0.25em;
position: relative;
padding: var(--padding);
background-image: url('https://wallpapercave.com/wp/1OXITrf.jpg');
background-size: cover;
}
.inner {
border: var(--border-width) solid red;
box-shadow: 0 0 0 calc(var(--border-width) + var(--padding)) rgba(255, 255, 255, 0.75);
}
.content {
color: #fff;
background: rgba(0, 0, 0, 0.75);
min-height: 10em;
width: 65%;
}
<section class="welcome">
<div class="inner">
<div class="content">
<p>Hello Woorld</p>
</div>
</div>
</section>