#html #css #text #webkit #background-image
#HTML #css #текст #webkit #фоновое изображение
Вопрос:
Я создал 3 div с текстом и фоновым изображением, используя webkit-background-clip, чтобы показать изображение позади.
С моим кодом он отлично работает в firefox, но там, где я изменил размер текста (используя преобразование / масштабирование в css) в целях дизайна, эти преобразованные разделы заголовка не работают в chrome, но они есть в firefox. Я использовал теги класса 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">amp;</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 дней и перепробовал все виды совместимости, варианты отображения и т.д. … И я в растерянности
Заранее спасибо
Комментарии:
1. Измените отображение на встроенное в этих промежутках вместо встроенного блока и посмотрите, работает ли оно как в Firefox, так и в Chrome.
2. Спасибо @Jason, я заменил на inline все, кроме первой строки с текстом в ней, и теперь она показывает картинку позади, но она не выполнила преобразование: масштаб (1, 1.6) и т.д. … для определенных букв, для которых есть класс span и transform на них? он также избавился от масштабных преобразований в forefox? В Firefox, если я изменяю определенный интервал обратно на встроенный блок, он выполняет преобразование?
3. Да, я понял это, когда вы написали предыдущий комментарий. Ваш масштаб, когда он находится на встроенном блоке, действительно работает. Что, похоже, не работает, так это прозрачное заполнение текста. Если вы установите -webkit-цвет заливки текста: черный. Вы увидите, что масштаб работает.
4. Спасибо @ jason, я посмотрел, и даже при использовании значений rgba и низкой непрозрачности он все еще не показывает изображение позади? могу ли я что-нибудь еще сделать? как я в недоумении? У меня есть функция jquery, открывающая div при нажатии на поле с текстом, как вы думаете, это может иметь к этому какое-то отношение?
5. На это не имеет никакого отношения к jquery. Даже без этого у меня не работает в Chrome.