Допустим есть какой-либо прозрачный фон блока: background-color: rgba(255, 255, 255, 0.75); И на этом блоке отображается текст со следующим свойством: color: rgba(255, 255, 255, 0.25); Фон сайта задан так: body { background-image: url(../images/font1.jpg);} В итоге прозрачность текста видна относительно родительного элемента. Фон сайта не виден с такой прозрачностью текста. Как реализовать прозрачность текста к фону сайта в каком-либо элементе? Т.е. в итоге будет видна часть фона из текста.
Ответ
Вероятно таким образом.
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}
.wrapper {
text-align: center;
}
.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.65em 0;
}
.clip-text--no-textzone:after {
content: none;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(http://lorempixel.com/480/200/abstract/7);
}
.clip-text_two {
background-image: url(http://lorempixel.com/480/200/abstract);
}
.clip-text_tree {
background-image: url(http://lorempixel.com/480/200/abstract/2);
}
.clip-text_four {
background-image: url(http://lorempixel.com/480/200/abstract/4);
}
.clip-text_five {
background-image: url(http://lorempixel.com/480/200/abstract/5);
}
.clip-text_six {
background-image: url(http://lorempixel.com/480/200/abstract/9);
}
.clip-text_seven {
background-image: url(http://lorempixel.com/480/200/abstract/8);
}
.clip-text_eight {
background-image: url(http://lorempixel.com/410/200/people);
}
.clip-text_nine {
background-image: url(http://lorempixel.com/480/200/nightlife);
}
.clip-text_ten {
background-image: url(http://lorempixel.com/480/200/nightlife/8);
}
.clip-text_eleven {
background-image: url(http://lorempixel.com/480/200/fashion/10/cc);
background-size: cover;
}
.clip-text_twelve {
background-image: url(http://lorempixel.com/480/200/people/7/cc);
}
.clip-text_thirteen {
background-image: url(http://lorempixel.com/480/200/food/5/cc);
}
.clip-text_fourteen {
background-image: url(http://lorempixel.com/480/200/city/9/cc);
}
.clip-text_fifteen {
background-image: url(http://lorempixel.com/480/200/nightlife/5);
}
Или так:
html, body{ background: grey; } p{ margin: 0px; } #clip{ /* Бекграунд добавлять первым */ background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==); background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 28vw; font-weight: bold; text-align: center; }
Другая маска
Градиент.
.gradient1 { font-size: 96px; margin: 0.5em; opacity: 0.9; display: inline-block; position: relative; color: #000; background: #fff; mix-blend-mode: multiply; } section.light { background: #eee; } .gradient1::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-linear-gradient(left,#23966c, #faaa54, #e23b4a, #db0768, #360670); background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670); pointer-events: none; mix-blend-mode: screen; }
Комментариев нет:
Отправить комментарий