transparente - ¿Cómo puedo hacer que el texto en div opacidad inferior en HTML
Agregue opacidad para div principal y el texto dentro de div también llevará la opacidad. En su ejemplo, el contenedor padre tiene fondo y luego otro contenedor dentro con el texto con diferente color, diferente del fondo div.
.main {
width: 350px;
height: 250px;
background-image: url(http://i.stack.imgur.com/GgQ5e.jpg);
}
.container {
opacity: 0.5;
background-color: black;
width: 300px;
height: 200px;
}
p {
font-size: 100px;
color: white;
opacity: .3;
}
<div class="main">
<div class="container">
<p>
TEXT
</p>
</div>
</div>
Esto aparentemente se puede hacer en CSS usando enmascaramiento de texto. (ver https://css-tricks.com/how-to-do-knockout-text/ ) Sin embargo, es más fácil de usar para navegadores cruzados hacerlo con SVG.
<svg>
<pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800">
<image width="750" height="800" xlink:href="image.jpg"></image>
</pattern>
<text x="0" y="80" class="headline" style="fill:url(#pattern);">background-clip: text | Polyfill</text>
</svg>
del sitio web css-tricks
La propiedad mix-blend-mode CSS le dará el efecto que está buscando (no se puede lograr usando solo opacity ). SVG no es necesario si no necesita soporte de Internet Explorer. Esta solución es compatible con Chrome, Firefox, Safari, Opera y otros (consulte la tabla de compatibilidad aquí ).
Demo en vivo:
html, body {
margin: 0;
}
.mix {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 100px;
font-size: 80px;
color: white;
padding: 20px;
margin: 10px;
background-color: black;
mix-blend-mode: multiply;
opacity: 0.8;
}
<img src="http://i.imgur.com/5LGqY2p.jpg?1">
<div class="mix">
Text
</div>
Lo que estás pidiendo no parece posible solo con opacidad. Al disminuir la opacidad del texto, lo que termina mostrándose es el elemento padre y lo que está detrás del elemento padre dependiendo de la opacidad principal, y así sucesivamente. Sin embargo, parece querer que la transparencia total llegue al padre del padre mientras que el padre tiene su propia opacidad diferente fuera del texto.
Para esto, necesitarás usar clip-path.
El mejor soporte para navegadores cruzados parece ser SVG clip-path para elementos SVG . Pero echa un vistazo al artículo de CodePen / CSS-Tricks para que veas otras opciones que tienes para este efecto.
Mira el código a continuación:
.item--svg-clip-path-svg image {
clip-path: url(#clipping);
}
.demo,
#clipping,
#masking text {
font: bold italic 7em/1.5 Georgia;
}
/* Common
------------------------------------------- */
BODY {
font: 12px/1.4"Trebuchet MS", Arial, sans-serif;
}
A {
color: tomato;
}
H1,
H2,
H3,
H4 {
margin-bottom: 1rem;
font-family: Georgia, serif;
line-height: 1.4;
}
H1 {
position: relative;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #CCC;
text-align: center;
text-shadow: 1px 1px 0 white, 2px 2px 0 #555;
font-size: 4em;
font-style: italic;
}
H1:after {
content: "Live demo";
position: absolute;
margin-left: 5px;
padding: 1px 5px;
vertical-align: top;
border-radius: 5px;
background: paleturquoise;
white-space: nowrap;
text-shadow: none;
font-size: 1rem;
color: #FFF;
}
H2 {
padding-bottom: .3rem;
border-bottom: 1px solid #333;
font-size: 2.8em;
color: #333;
}
H3 {
text-shadow: 1px 1px 0 white, 2px 2px 0 #CCC;
font-size: 2.5em;
font-style: italic;
color: #777;
}
H4 {
font-size: 1.6em;
font-style: italic;
color: #999;
}
code {
display: block;
position: relative;
margin-bottom: 1rem;
overflow: auto;
max-width: 90%;
padding: 35px 10px 7px;
border-radius: 5px;
}
.comment code {
display: inline-block;
margin: 0;
padding: 2px 5px;
vertical-align: middle;
background: #EEE;
color: #777;
}
code:before {
left: 0;
right: 0;
top: 0;
height: 25px;
line-height: 25.2px;
padding-left: 10px;
position: absolute;
font-weight: bold;
font-style: italic;
}
.comment code:before {
content: none;
}
.code--css {
background: #f7edba;
}
.code--css:before {
content: "CSS";
background: #f2e18c;
color: #8a750f;
}
.code--svg {
background: #e6f4be;
}
.code--svg:before {
content: "SVG";
background: #d6ec93;
color: #678217;
}
.svg-defs {
position: absolute;
width: 0;
height: 0;
}
.wrapper {
width: 90%;
min-width: 500px;
max-width: 800px;
margin: 0 auto;
padding: 2rem 0;
conter-reset: mylist;
}
.wrapper:after {
content: '''';
display: table;
width: 100%;
clear: both;
}
.item {
position: relative;
margin-bottom: 2em;
padding-bottom: 2em;
padding-right: 3em;
border-bottom: 1px solid #DDD;
counter-increment: mylist;
}
.item:before {
content: counter(mylist);
position: absolute;
right: 0;
top: 0;
font: 2rem/1 Georgia, serif;
color: #EEE;
}
.item:after {
content: '''';
display: table;
width: 100%;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo:before {
content: '''';
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg) no-repeat;
opacity: 0;
transition: .7s;
}
.item:hover .demo:before {
opacity: .4;
}
.text {
padding-left: 230px;
}
/* Browsers
------------------------------- */
.browsers {
margin-top: 1.5rem;
}
.browser {
display: inline-block;
opacity: .2;
}
.has-support {
opacity: 1;
}
.browser:before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 7px;
background: url(http://yoksel.github.io/assets/img/sprite-browsers.png) 0 0 no-repeat;
vertical-align: middle;
}
.firefox:before {
background-position: 0 0;
}
.chrome:before {
background-position: -30px 0;
}
.safari:before {
background-position: -60px 0;
}
.ie8:before {
background-position: -90px 0;
}
.ie9:before {
background-position: -90px 0;
}
.opera-13:before {
background-position: -120px 0;
}
.opera-12:before {
background-position: -150px 0;
}
.opera-mob:before {
background-position: -150px 0;
}
.opera-mini:before {
background-position: -150px 0;
}
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<polygon id="Star-1" points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247" />
<text x="0" y="3.2em">Text</text>
</clipPath>
<image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" />
</defs>
</svg>
<div class="item item--svg-clip-path-svg">
<div class="demo">
<svg width="200" height="300">
<image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" />
</svg>
</div>
<div class="text">
<h3>SVG clip-path for SVG elements</h3>
<a href="http://www.w3.org/TR/SVG11/masking.html#EstablishingANewClippingPath">Specification</a>
<br />
<br />
<code class="code--svg"><pre><clipPath id="clipping">
<polygon points="98.4999978 153.75..."/>
</clipPath></pre></code>
<code class="code--css"><pre>.item {
clip-path: url(#clipping);
}</pre></code>
<ul class="browsers">
<li class="browser chrome has-support"></li>
<li class="browser safari has-support"></li>
<li class="browser opera-13 has-support"></li>
<li class="browser firefox has-support"></li>
<li class="browser ie9 has-support"></li>
<li class="browser opera-12 has-support"></li>
</ul>
</div>
</div>
Referencia: css-tricks