Я сделал 3 div с текстом и фоновым изображением, используя webkit-background-clip, чтобы показать изображение позади.
С моим кодом он отлично работает на Firefox, но там, где я изменил размер текста (используя трансформацию / масштабирование в CSS) для целей проектирования, эти преобразованные разделы заголовка не работают в Chrome, но на Firefox. Я использовал теги span span для изменения размера шрифта, это разделы, которые не отображаются в Chrome, но в Firefox?
примеры ниже:
Ниже приведен пример Google Chrome
Все части, которые, по-видимому, отсутствуют, имеют теги классов span с преобразованиями
.column-boxes {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 90%;
margin: 0 auto;
padding: 36px;
}
.column-box {
height: auto;
min-height: 300px;
min-width: 300px;
max-width: 400px;
max-height: 400px;
width: 30%;
margin: 0 auto 2% auto;
background-color: #fff;
}
.welcome-text {
color: #888;
text-align: left;
font-weight: 200;
font-size: 4vw;
width: 100%;
margin: 0;
padding-bottom: 36px;
margin-left: 2.8%;
/*text-shadow:
-1px -1px 0 #f3f3f3,
1px -1px 0 #f3f3f3,
-1px 1px 0 #f3f3f3,
1px 1px 0 #f3f3f3;*/
}
/* span for welcome text */
.welcome-text-clash {
color: #ccc;
font-weight: 900;
letter-spacing: -0.07em;
}
/*.box-title {
font-family: 'Open Sans';
margin: 0;
font-weight: 300;
font-size: 108px;
color: #fff;
line-height: 92px;
text-shadow:
-1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}*/
.box-title-1 {
font-size: 3.2vw;
font-family: 'Poppins', sans-serif;
font-weight: 900;
word-wrap: break-word;
letter-spacing: -0.05em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/fashion-photography-strip-and-stare.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
line-height: 2.5vw;
text-align: center;
}
.box-title-2 {
font-size: 8vw;
font-family: 'Poppins', sans-serif;
font-weight: 900;
word-wrap: break-word;
letter-spacing: -0.05em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/kensey-foods-photography-nectarine-tart.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
line-height: 6vw;
text-align: center;
}
.box-title-3 {
font-size: 4.5vw;
font-family: 'Poppins', sans-serif;
font-weight: 900;
word-wrap: break-word;
letter-spacing: -0.05em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/imogen-thomas-glass-sculpture.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
line-height: 3.4vw;
text-align: center;
}
.box-title-1-a {
display: inline-block;
font-size: 7.7vw;
line-height: 6vw;
}
.box-title-1-b {
display: inline-block;
font-size: 9.6vw;
line-height: 11.3vw;
transform: scale(1, 1.6);
-moz-transform: scale(1, 1.6); /* Firefox */
}
.box-title-1-c {
display: inline-block;
font-size: 7.5vw;
line-height: 6.7vw;
transform: scale(1, 1.2);
-moz-transform: scale(1, 1.2); /* Firefox */
}
.box-title-2-a {
font-size: 8.1vw;
line-height: 6.5vw;
}
.box-title-2-b {
font-size: 7.8vw;
line-height: 6.1vw;
}
.box-title-2-c {
font-size: 10.7vw;
line-height: 8.2vw;
margin-left: -1%;
}
.box-title-3-a {
display: inline-block;
font-size: 10.2vw;
line-height: 10.2vw;
transform: scale(1, 1.3);
-moz-transform: scale(1, 1.3); /* Firefox */
}
.box-title-3-b {
font-size: 7.5vw;
line-height: 5.1vw;
}
.box-title-3-c {
display: inline-block;
font-size: 7.5vw;
line-height: 8vw;
transform: scale(1, 1.34);
-moz-transform: scale(1, 1.34); /* Firefox */
}
#commercial-box {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/fashion-photography-strip-and-stare.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<section class="column-boxes">
<h1 class="welcome-text"><span class="welcome-text-clash">Clash</span>
<span style="letter-spacing: -0.09em">&</span><span class="welcome-text-
clash">Clash</span>PHOTOGRAPHY</h1>
<div id="commercial-box" class="column-box">
<h2 class="box-title-1">COMMERCIAL<span class="box-title-1-
a">PHOT</span><br><span class="box-title-1-b">OGR</span><br><span
class="box-title-1-c">APHY</span></h2>
</div>
<div id="food-box" class="column-box">
<h2 class="box-title-2">FOOD<span class="box-title-2-a">PHOT</span>
<br><span class="box-title-2-b">OGRA</span><br><span class="box-title-2-
c">PHY</span></h2>
</div>
<div id="product-box" class="column-box">
<h2 class="box-title-3">PRODUCT<span class="box-title-3-
a">PHO</span><br><span class="box-title-3-b">TOGR</span><br><span
class="box-title-3-c">APHY</span></h2>
</div>
</section>
Буду признателен за любую помощь, так как я искал ответ в течение 2 дней, сейчас искал ответ и перепробовал все виды совместимости, отображал варианты и т. Д ... и я в растерянности
Заранее спасибо