使用引導程序4在html中的另一個圖像上覆蓋圖像
[英]overlay image on another image in html with bootstrap 4
問題描述
我想在另一個圖像上疊加圖像並更改其像素（位置）。 我搜索了谷歌並寫下了這段代碼：
.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 個解決方案
解決方案1
0 2018-10-28 14:24:08
希望這對您有幫助。
<!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>
解決方案2
0 2018-10-28 14:40:39
原因
之所以圖像覆蓋不響應，因為你給一個特定的值translate(440px, 340px)的transform ，這是適用於所有的設備。
如何修復
對每個視口/設備使用媒體查詢（ @media ）。
要么
使其相對於容器#test absolute位置為absolute位置。 我已經使用這種方法來達到目的。 您可以看一下正在工作的小提琴。
使用Bootstrap 4在文本上覆蓋圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.