这是有可能的,但这实在是太老套了:
HTML格式:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="css/main.css" rel="stylesheet">
</head>
<body><div class="whole-page">
<div class="content-area-bg1"></div>
<div class="content-area-bg2"></div>
<div class="content-area-bg3"></div>
<div class="content-area-bg4"></div>
<div class="content-area-bg5"></div>
<div class="content-area-bg6"></div>
<div class="content-area-bg7"></div>
<div class="content-area-bg8"></div>
<div class="content-area-bg9"></div>
<div class="content-area-bg10"></div>
<div class="content-area"><h1>This text should<br>not fade out with<br>the background<br>image</h1></div>
</div>
CSS:
:root{
--textcolor-1: #fff;
}
html{
font-size: 62.5%;
box-sizing: border-box;
}
*{
margin: 0;
padding: 0;
}
*, *::before, *::after{
box-sizing: inherit;
}
body {
background-image: url("../kittenbg.jpg");
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6rem;
font-size: 1.25rem;
color: var(--textcolor-1);
}
.whole-page{
width: 100%;
margin: 0;
padding: 0;
}
.header{
height: 7rem;
text-align: center;
}
h1 {
font-size: 4rem;
line-height: 4.8rem;
}
.content-area-bg1
{
width: 408px;
height: 287px;
display: block;
position: relative;
}
.content-area-bg1::after {
content: "";
background: url("../kitten.jpg");
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -10;
}
.content-area-bg2
{
width: 408px;
height: 260px;
top: -287;
display: block;
position: relative;
}
.content-area-bg2::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -9;
}
.content-area-bg3
{
width: 408px;
height: 230px;
top: -547;
display: block;
position: relative;
}
.content-area-bg3::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -8;
}
.content-area-bg4
{
width: 408px;
height: 200px;
top: -777;
display: block;
position: relative;
}
.content-area-bg4::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -7;
}
.content-area-bg5
{
width: 408px;
height: 170px;
top: -977;
display: block;
position: relative;
}
.content-area-bg5::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -6;
}
.content-area-bg6
{
width: 408px;
height: 140px;
top: -1147;
display: block;
position: relative;
}
.content-area-bg6::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -5;
}
.content-area-bg7
{
width: 408px;
height: 110px;
top: -1287;
display: block;
position: relative;
}
.content-area-bg7::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -4;
}
.content-area-bg8
{
width: 408px;
height: 80px;
top: -1397;
display: block;
position: relative;
}
.content-area-bg8::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -3;
}
.content-area-bg9
{
width: 408px;
height: 50px;
top: -1477;
display: block;
position: relative;
}
.content-area-bg9::after {
content: "";
background: url("../kitten.jpg");
opacity: .25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -2;
}
.content-area-bg10
{
width: 408px;
height: 20px;
top: -1527;
display: block;
position: relative;
}
.content-area-bg10::after {
content: "";
background: url("../kitten.jpg");
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.content-area
{
width: 408px;
height: 287px;
top: -1547;
display: block;
position: relative;
padding: 1rem;
}
