Imagine that: there is a background assigned to "body" and a white "div" with a text inside of it. And this text is so that we can see the background through it. How to implement that with CSS? Like this:
-
2Shall we have your attempt?– Zay LauSep 23, 2016 at 9:47
-
1Could you please show some code or some example?– aavrugSep 23, 2016 at 9:47
-
I think this is a duplicate of http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css– CorporalisSep 23, 2016 at 9:49
-
opacity might be a good read for you :)– Roy123Sep 23, 2016 at 9:50
-
1That's probably an image with opacity.– Sergio TxSep 23, 2016 at 9:53
3 Answers
You can use SVG to create a mask
with a rect
element for the white background and a text
element for transparent text part.
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');
background-size: cover;
height: 100vh;
background-position: center;
font-family: 'Open Sans', sans-serif;
}
svg {
width: 300px;
height: 100px;
}
svg text {
text-anchor: middle;
}
svg #overlay {
fill: white;
opacity: 0.7;
}
svg #text {
font-size: 40px;
font-weight: bold;
}
svg #r {
fill: white;
mask: url(#mask);
}
<svg>
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect id="overlay" x="0" y="0" width="100%" height="100%" />
<text id="text" x="50%" y="0" dy="65px">Some text</text>
</mask>
</defs>
<rect id="r" x="0" y="0" width="100%" height="100%" />
</svg>
Update: To create full element size overlay with transparent text you can use position: relative
on parent element and position: absolute
on svg and set mask
height and width to 100%
. To center the text
you can use dy: 50%
with alignment-baseline: middle;
and text-anchor: middle;
body {
margin: 0;
padding: 0;
}
.element {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg');
background-size: cover;
height: 100vh;
background-position: center;
font-family: 'Open Sans', sans-serif;
position: relative;
}
section {
height: 100vh;
background: lightgreen;
}
svg {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
}
svg text {
text-anchor: middle;
alignment-baseline: middle;
font-size: 40px;
font-weight: bold;
}
svg #overlay {
fill: white;
opacity: 0.7;
}
svg #r {
fill: white;
mask: url(#mask);
}
<div class="element">
<svg>
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect id="overlay" x="0" y="0" width="100%" height="100%" />
<text id="text" x="50%" y="0" dy="50%">Some text here</text>
</mask>
</defs>
<rect id="r" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
<section></section>
Use opacity;
html:
<body>
<div class='frontimage'>
</div>
</body>
css:
body{
background-image: url("yourimage.jpg");
}
.frontimage{
background-image: url("yourotherimage.jpg");
opacity: 0.5;
}
with css you can use opacity:0.6; (0 = full transparent - 1 = full visible).
*{font-family:Helvetica, Arial, Sans-Serif;}
.background{background:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);}
.text{font-size: 5em; font-weight:bold; opacity:0.6;}
<div class="background">
<span class="text">
Lorem ipsum
</span>
</div>
with photoshop you can decrease the refill bar of text layer or increase transparency of this layer.