наложить изображение на другое изображение в формате HTML с помощью начальной загрузки 4 - PullRequest
Новая
       0

наложить изображение на другое изображение в формате HTML с помощью начальной загрузки 4

0 голосов
/ 28 октября 2018

Я хочу наложить изображение на другое изображение и изменить его пиксель (местоположение).Я ищу в Google и написал этот код: 

.background {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(440px, 340px);
  z-index: 2;
}
<div class="container-fluid">
  <div class="row" style="margin-top:10px;">
    <div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10  " id="test">
      <img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
      <img src="static/overlay.png" id="overlay2" class="overlay">
    </div>

Этот код дает мне желаемый результат, но проблема в том, что когда я изменяю размер страницы, наложение фона получается из фонового изображения.Я хочу сохранить пропорцию между ними.

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Причина

Причина, по которой наложение изображения не реагирует, поскольку вы задаете конкретное значение translate(440px, 340px) для transform, и это применимо для всех устройств.

Как это исправить

Использовать медиазапросы (@media) для каждого видового экрана / устройства.

или

Сделатьпозиция оверлейного изображения absolute относительно его контейнера #test.Я использовал этот подход для достижения результата.Вы можете взглянуть на рабочую скрипку.

Ссылка: https://jsfiddle.net/Baliga/fme12tby/22/

0 голосов
/ 28 октября 2018

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

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .image-container {
            position: relative;
            display: inline-block;  
        }
        .image-overlay {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="image-container">
      <img class="image-content"  src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
      <img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
    </div>
</body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...