Точно разместить текст поверх изображения с обложкой фона

Извините, если это трудно понять, но это также сложно объяснить.Точно разместить текст поверх изображения с обложкой фона

У меня есть DIV с этим CSS:

.gallery{ 
     position:fixed; 
     top:0; 
     bottom:0; 
     left:0; 
     right:0; 
      background-image:url(image.jpg); 
      background-size:cover; 
    }

... поэтому изображение всегда покрывает видовой экран на всех размеров.

Я хотел бы, чтобы слой какой-то текст над этим, что сохраняет ту же относительную позицию по отношению к изображению (только относительное положение, размер остается прежним, его просто несколько слов)

Я могу поставить изображения в div, то используйте процентное верхнее дополнение, чтобы имитировать соотношение сторон изображения. НО после того, как изображение начнет обрезаться (с использованием фона-обложки), соотношение сторон больше не совпадает с исходным изображением, поэтому через некоторое время текст начинает покрывать части изображений, которые он не должен.

Одним из решений является использование медиа-запросов формата изображения и просто корректировка процента по мере изменения аспекта, но это неудобно и не кажется правильным.

Любые идеи или это просто невозможно? Я знаю размеры изображения, поэтому, возможно, я могу использовать эту информацию для имитации фона-обложки в текстовом div?

источник

2014-01-03 user1010892

Одним из ответов может быть использование SVG для вашего текста. Если я правильно понял ваш вопрос, вы хотите, чтобы текст масштабировался с изображением (на самом деле это просто div с фоном изображения).

Нормальный текст HTML не будет масштабироваться. Однако текст SVG будет.

<text style="font-weight: bold;">This is text in Scalable Vector Graphic (SVG)</text>

Надеюсь, это поможет.

источник

2014-01-03 20:53:45 JasonDC

Спасибо за это - мой вопрос был немного введен в заблуждение, так как я не хочу, чтобы текст масштабировался, я просто хочу, чтобы относительная позиция осталась прежней - я отредактировал свой вопрос, чтобы сделать его более ясным. Интересная идея. Я мог бы создать div тех же размеров, что и изображение, а затем установить текст как фоновое изображение SVG и использовать обложку фона. Однако я бы предпочел сохранить реальный текст. – user1010892

Просто попробовал использовать SVG-изображение в тех же размерах, что и изображение ниже, с установленным на нем фоном. Он остается в правильном положении, но, как фоновое изображение ниже, оно обрезается как определенные пропорции. Я думаю, что должно быть решение JS, но не может найти ничего достаточно легкого, чтобы следовать – user1010892

Точно разместить текст поверх изображения с обложкой фона

ответ

Смежные вопросы