Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 9, 2016 23:45
Show Gist options
  • Save anonymous/6af568ee634f8600b7072d35d42d8ab6 to your computer and use it in GitHub Desktop.
Save anonymous/6af568ee634f8600b7072d35d42d8ab6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Overlay color using pseudo-element ::after // source https://jsbin.com/numosi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Overlay color using pseudo-element ::after">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.bg {
/* required */
position: relative;
z-index: 1;
/* end:required */
padding: 8rem 2rem;
color: white;
background-image: url('//source.unsplash.com/random/800x600');
background-size: cover;
}
/* required */
.bg::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #7b4397; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #7b4397 , #dc2430); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #7b4397 , #dc2430); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: .7;
}
/* end:required */
</style>
</head>
<body>
<section class="bg">
<h1>AAAAAAAAAAAAAAA</h1>
<p>Bacon ipsum dolor amet bresaola pork belly pork loin chicken beef kevin tongue t-bone beef ribs ball tip rump. Ground round short loin bresaola, picanha meatloaf venison short ribs shankle kielbasa meatball capicola ham hock pig pork beef. Ribeye spare ribs sausage, porchetta shankle andouille shank hamburger. Pastrami kielbasa chuck, porchetta tail bacon chicken ham hock ground round meatloaf ball tip cupim leberkas t-bone tenderloin.</p>
</section>
<script id="jsbin-source-css" type="text/css">.bg {
/* required */
position: relative;
z-index: 1;
/* end:required */
padding: 8rem 2rem;
color: white;
background-image: url('//source.unsplash.com/random/800x600');
background-size: cover;
}
/* required */
.bg::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #7b4397; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #7b4397 , #dc2430); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #7b4397 , #dc2430); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: .7;
}
/* end:required */</script>
</body>
</html>
Raw
jsbin.numosi.css
.bg {
/* required */
position: relative;
z-index: 1;
/* end:required */
padding: 8rem 2rem;
color: white;
background-image: url('//source.unsplash.com/random/800x600');
background-size: cover;
}
/* required */
.bg::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #7b4397; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #7b4397 , #dc2430); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #7b4397 , #dc2430); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
opacity: .7;
}
/* end:required */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment