I have a page that I was attempting opacity with and it predictably failed because I’ve never done it before. I gather there are two ways of accomplishing this: through the CSS or with a tiled image. I would prefer to do it with CSS. What do you think?
Below is a graphic I made showing the outlines of the “layers.” There are 3: 1) the paisley background (from a repeating tile), 2) the 60% Opaque White layer, and 3) the 100% white layer on which the content is placed.
These are going to be standard book lists of historical mystery writers so the books are in two tables on this particular page.
You can see on line 500 where I attempted to set up a line under each row — just one line per row (there are breaks in the line) — and on line 581 where I attempted to place the image for tiling. Both failed. 
Thanks for any help and the code is below.
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap" rel="stylesheet">
<title>PG1 svgpar7-h&m-books ᰄ by semicodin / with Gratitude for Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'solway', serif;
font-size: 2.5rem;
line-height: 1.05;
font-weight: 700;
color: black;
}
p {line-height: 1; margin: 0;}
u {text-decoration: underline}
* {box-sizing: border-box}
.cent {text-align: center}
.blu {color: blue}
.crim {color: crimson}
.blud {color: #611205}
.br {line-height: 2.88rem}
.goudy {
font-family: 'goudy bookletter 1911', serif;
font-weight: bold;
}
.opaq {
margin: 5rem;
background: rgb(255 0 0 / .6);
opacity: 0.6;
}
.solid {
margin: 5rem;
background-color: white;
}
.main {
padding: 5rem;
/* margin: 4rem 0 4rem 0; */
font-style: normal;
text-align: left;
color: black;
font-size: 2.75rem;
line-height: 1.08;
font-weight: bold;
font-family: 'solway', serif;
}
/* ▬▬▬▬▬ DIVIDERS ▬▬▬▬▬ */
/* DIVIDERS & GLYPHS */
.dvdr-a {
display: block;
margin-left: auto;
margin-right: auto;
width: 580px;
height: 120px;
}
.dvdr-a {
img URL('https://semicodin.nekoweb.org/pics/dvdr-a_wh.png');
}
.tanlinkhere a:link {
color: #dab571;
font-family: 'solway', serif;
font-weight: 700;
font-size: 4rem;
line-height: 1.1;
}
.tanlinkhere a:visited {
color: #dab571;
font-family: 'solway', serif;
font-weight: 700;
font-size: 4rem;
line-height: 1.1;
}
/* ▬▬▬▬▬▬ CONTACT ▬▬▬▬▬▬ */
.contact {
margin: 0;
padding: 0rem 0rem 7rem 0rem;
background-color: black;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.here {
color: #ffffee;
text-align: center;
padding-top: 6rem;
margin: 4.5rem 0 2rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1.1;
font-weight: bold;
}
.down {
color: #ffffee;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: 700;
}
.thanks {
color: #ffffee;
text-align: center;
margin: 0 4rem 0 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.quest {
color: #ffffee;
text-align: center;
margin: 2.25rem 2rem 2.25rem 2rem;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.05;
font-weight: bold;
}
.end {
color: #ffffee;
text-align: center;
margin: 4rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clamiv35 {
color: #ffffee;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {color: magenta}
a:hover {color: magenta}
a:link {color: #dab571}
a:visited {color: #dab571}
/*▬▬▬▬ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ▬▬▬▬ */
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {
box-shadow: 0 34px rgb(0, 0, 0, 0.8)
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://semicodin.nekoweb.org/pics/parchment-a.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr {pointer-events: none}
.ctr a {pointer-events: initial}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {-index: 3}
.ctrmid {z-index: 2}
.ctr3 {z-index: 1}
.ctr2 .tab:before {
flex: 0 0 65px
}
.ctr3 .tab:after {
flex: 0 0 65px}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {z-index: 1}
.svgtabs {
--tab3-bg-color: #b16742;
--tab3-color: #000;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
border-bottom: 10px solid #000;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.seventab a {
margin-right: -5.4rem;
margin-left: -1rem;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-family: 'solway', serif;
font-weight: 800;
color: black;
font-size: 2.52rem;
}
.svgtabs.seventab span {
padding: 11px 1rem 0;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.hide-svg {
position: fixed;
left: -100vw;
top: -100vh;
height: 1px;
width: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.tab-animated {
height: 220px;
animation: tab 10s infinite;
}
@keyframes tab {
0% {
height: 220px;
width: 200px;
}
50% {
height: 210px;
width: 180px;
}
100% {
height: 220px;
width: 200px;
}
}
.svgtab1 {z-index: 7}
.svgtab2 {z-index: 6}
.svgtab3 {z-index: 5}
.svgtab4 {z-index: 4}
.svgtab5 {z-index: 3}
.svgtab6 {z-index: 2}
.svgtab7 {z-index: 1}
/* ━━━━━━ TABS ━━━━━━ */
.tab a {
transform: translateY(-8px);
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
/* ▬▬▬▬▬▬ LEADS ▬▬▬▬▬▬ */
.leada {
color: blue;
padding-bottom: 3.13rem;
border-bottom: .5rem dotted black;
margin: 3.13rem 0 3.13rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
color: black;
margin: 3.13rem 0 0 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 4rem;
line-height: 1.1;
}
.leadc {
text-align: center;
margin: 1rem 0 2.5rem 0;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.05;
}
.leadd {
color: black;
margin: 3.13rem 0 2.5rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 4rem;
line-height: 1.1;
}
.leade {
color: black;
margin: 3.13rem 0 0 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 4rem;
line-height: 1.1;
}
.leadf {
text-align: center;
margin: 0 0 2.5rem 0;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 1.05;
}
.leadg { /* Ellis Peters */
color: black;
margin: 3.13rem 0 2.5rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 4rem;
line-height: 1.1;
}
.lead_h { /* Ellis Peters */
color: black;
margin: 3.13rem 0 2.5rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 4rem;
line-height: 1.1;
}
.oeuvre {
margin: 2.5rem 1.5rem 2.5rem 1.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.75rem;
line-height: 1.08;
font-weight: bold;
}
table tr {
border-bottom: .25rem solid black;
}
img {
padding: 4rem
}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<div class="leada">
7 Animated SVG Tabs<br>
Featuring Grid
</div>
<!-- ▬▬▬▬▬ 7 TABS ▬▬▬▬▬ -->
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs seventab">
<a class="svgtab1" href="#">
<span>1587</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
<a class="svgtab2" href="#">
<span>1861</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
<a class="svgtab3" href="#">
<span>1768</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
<a class="svgtab4" href="#">
<span>1284</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
<a class="svgtab5" href="#">
<span>1869</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
<a class="svgtab6" href="#">
<span>1316</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
<a class="svgtab7" href="#">
<span>1475</span>
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab" />
</svg>
</a>
</nav>
<!--▬▬▬▬ CLOSING 7 TABS ▬▬▬-->
<div class="content-area">
<!-- All content goes in here including tables and will sit on top of the image. -->
<img src="https://semicodin.nekoweb.org/pics/ppewter-1.jpg;
background-repeat: repeat;">
<div class="opaq">
<div class="solid">
<div class="main">
<div class="leadb">
Eight<br>
History Mystery<br>
Writers</div>
<div class="leadc">
by semicodin
</div>
<p class="br">
This is a site I maintain for lists of historical mystery writers I like and their series titles in strict chronological order. Each tab represents the year that writer is writing in. Two authors — Edward Marston and Philip Gooden — occupy the vaunted TAB1 position because a) the books are centered on a fictional theatrical troupe (my favorite sub-genre), b) they’re set in similar periods in history — 1587 (my favorite era and setting: Elizabethan England, during the time of William Shakespeare, Christopher (‘Kit’) Marlowe, and the plague!), and c) there are far, <i>far</i> too few of their books for my satisfaction! An author such as Anne Perry (Tab 5) can take care of herself; it’s the Edward Marstons (16) and Philip Goodens (6 books alack!) of the world I worry about.</p>
<div class="leadd">
Strictly History!
</div>
<p class="br">
Before I list the books however I should explain what, for me, constitutes “historical” writing and what does <i>not</i>:</p><br>
<p class="br">
I take as my marker any series in which 80% or more of the period is before Alexander Graham Bell obtained his U.S. patent for the first telephone in March, 1876. It was around this time also that Karl Friedrich Benz began manufacturing the first motor car in Germany. Between the two I have settled on . . .</p>
<div class="leade">
1880</div>
<p class="leadf">
80% of the Story Takes Place Before 1880 to be Considered “Historical”</p>
<p class="br">
<i>The entire 20th Century is out of bounds for being considered “historical” in these lists.</i> If that offends some people I refer you to Librarything.com where their concept of historical includes most of the 20th Century.</p>
<div class="leadg">
A Word About<br>
Ellis Peters
</div>
I had to narrow the list to eight authors and these are the eight I chose. I’m not a great fan of “monkish” mysteries and I like my religion lite. I had to choose between Ellis Peters and Paul Doherty and Doherty’s Hugh Corbett won. Brother Cadfael will appear in my next edition of this list, along with 6 other history mystery authors of note.
<div class="dvdr-a">
<img src="https://semicodin.nekoweb.org/pics/dvdr-a_wh.png" alt="Divider" width="580px">
</div>
<div class="leadb">
Edward Marston<br>
1587</div>
<div class="leadf">
London, England<br>
“Lord Westfield’s Men”<br>
GENERAL DESCRIPTION</div>
<table class="ouevre">
<tbody>
<tr><td>1. (1988)<br>
The Queen’s Head</td></tr>
<tr><td>2. (1989)<br>
The Merry Devils</td></tr>
<tr><td>3. (1990)<br>
The Trip to Jerusalem</td></tr>
<tr><td>4. (1991)<br>
The Nine Giants</td></tr>
<tr><td>5. (1992)<br>
The Mad Courtesan</td></tr>
<tr><td>6. (1992)<br>
The Silent Woman</td></tr>
<tr><td>7. (1995)<br>
The Roaring Boy</td></tr>
<tr><td>8. (1996)<br>
The Laughing Hangman</td></tr>
<tr><td>9. (1997)<br>
The Fair Maid of Bohemia</td></tr>
<tr><td>10. (1999)<br>
The Wanton Angel</td></tr>
<tr><td>11. (2001)<br>
The Devil’s Apprentice</td></tr>
<tr><td>12. (2002)<br>
The Bawdy Basket</td></tr>
<tr><td>13. (2003)<br>
The Vagabond Clown</td></tr>
<tr><td>14. (2004)<br>
The Counterfeit Crank</td></tr>
<tr><td>15. (2005)<br>
The Malevolent Comedy</td></tr>
<tr><td>16. (2006)<br>
The Princess of Denmark</td></tr>
</tbody>
</table>
<div class="dvdr-a">
<img src="https://semicodin.nekoweb.org/pics/dvdr-a_wh.png" alt="Divider" width="580px">
</div>
<div class="leadb">
Philip Gooden<br>
1587</div>
<div class="leadf">
London, England<br>
“Lord Chamberlain’s Men”</div>
<p class="br">
GENERAL DESCRIPTION</p>
<table>
<tbody>
<tr><td>1. (2000)<br>
Sleep of Death</td></tr>
<tr><td>2. (2001)<br>
Death of Kings</td></tr>
<tr><td>3. (2002)<br>
The Pale Companion</td></tr>
<tr><td>4. (2003)<br>
Alms for Oblivion</td></tr>
<tr><td>5. (2004)<br>
Mask of Night</td></tr>
<tr><td>6. (2005)<br>
An Honorable Murderer</td></tr>
</tbody>
</table>
</div><!-- CLOSES MAIN -->
</div><!-- CLOSES SOLID -->
</div><!-- CLOSES OPAQ -->
</div><!-- CLOSING CONTENT-AREA -->
<div class="contact">
<div class="here">
<span class="tanlinkhere">
<a href="https://semicodin.nekoweb.org/vault/SVGPAR7_ANI_GRID-MASTER.ZIP">
Code Here</a></span>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="thanks">
This code courtesy of the Immutable Patience<br>
of Paul O’Brien at the Sitepoint Forums
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<span class="tanlinkquest"><a href="https://sitepoint.com/community/c/html-css/25">
the Sitepoint Forums</a></span><span class="clamiv35">!</span>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<span class="tanlinkend">
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a></span>
</div>
</div><!-- CLOSING CONTACT -->
<!-- This following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- I’m putting a div around it so that we can just hide them all from impacting on the page -->
<div class="hide-svg">
<!-- 7 TAB VERSION -->
<svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab" class="tab-unit">
<clipPath id="shape7">
<path d="M1425.55 1700.81c-9.892 0-10.854 3.666-13.164 7.378-1.671 2.685-4.696 5.999-6.313 5.96h51.153c-1.616.039-4.641-3.275-6.312-5.96-2.31-3.713-3.273-7.379-13.165-7.379h-7.346Z" transform="translate(-1397.992 -1700.126)" />
</clipPath>
<path style="fill:#000; stroke-width:3; stroke:#000" d="M1423.542 1700.126c-3.528.002-5.957.932-7.742 2.337-1.788 1.407-2.92 3.238-4.04 4.986-1.118 1.748-2.218 3.414-3.872 4.639-1.655 1.225-3.882 2.054-7.403 2.054h-2.493v.006h9.14a10.53 10.53 0 0 0 1.57-.96c1.896-1.404 3.089-3.244 4.213-5 1.124-1.757 2.18-3.43 3.732-4.65 1.552-1.222 3.607-2.044 6.91-2.044h16.185c3.303 0 5.359.823 6.91 2.045 1.552 1.222 2.609 2.893 3.733 4.65 1.123 1.757 2.317 3.599 4.213 5.002.475.352.992.673 1.56.957h6.657c-3.522 0-5.748-.83-7.403-2.056-1.654-1.226-2.754-2.89-3.873-4.64-1.118-1.748-2.251-3.582-4.039-4.99-1.785-1.405-4.214-2.334-7.743-2.336Z" transform="translate(-1397.992 -1700.126)" />
<image class="tab-animated tan7" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape7)" />
</g>
</defs>
</svg>
</div><!-- CLOSING HIDE-SVG-->
</body>
</html>
but if you only want the background to have the opacity then use the rgba format on the background color instead of the opacity property.
Here is the code:
