將div放在圖片上方

Question

好的，所以我想放置在另一個具有背景圖像的div上。 image-div具有以下屬性：

position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;

看起來我想要在所有設備上。 但是現在我需要在圖像div上覆蓋一個適合圖像特定部分的可點擊div。 使div適應非常容易，只需將位置設置為絕對，並設置頂部，左側，寬度和高度即可，但是一旦我以其他分辨率/密度顯示，div就會消失，這並不奇怪。 因此，我嘗試使用％或vh和vw進行定位，但似乎沒有任何效果。

無論我使用什么設備，分辨率和密度，如何將div定位在圖像頂部？

Answer 1

它是background-position ， background-size和包含div的百分比偏移量的組合。

將background-position保持在某個值，以便圖像上的斑點始終在屏幕上。
使用background-size: cover; 或background-size: contain; 以保持圖像（或其容器）的響應速度。
如果您在圖像的外部邊緣上有兩個或多個斑點，我建議使用contain ，但這會在較小的屏幕上顯着減小圖像尺寸，而您的內部div會保持較大。
在其他情況下，請使用cover進行調整大小。

在這里，我創建了一個示例：（我使用Jquery UI來調整圖像的大小）

 $( function() { $( "#resizable" ).resizable(); } ); 

 .container { background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop='); background-size: cover; background-position: 50% 50%; height: 500px; position: relative; width: 800px; } .hit-me-container { height: 16px; left: 52%; position: absolute; top: 45%; width: 16px; } .hit-me { animation: pulse 1s ease infinite; background-color: #fff; border: 3px solid #777; box-sizing: border-box; border-radius: 50%; cursor: pointer; height: 100%; width: 100%; } .hit-me-container:hover:after { background-color: #333; color: #fff; content: 'Buy these glasses'; display: block; font-family: sans-serif; font-size: 12px; left: 20px; padding: 5px; position: absolute; width: 100px; top: -4px; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } 

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container" id="resizable"> <div class="hit-me-container"> <div class="hit-me"></div> </div> </div> 

或檢查這個小提琴

Answer 2

    <style type="text/css">
    #div_1
        {
            position:relative;
            top:0;
            left:0;
            width:100%;
            height:200px;
            background-image: url('../img/1.jpg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
    #div_2
        {
            position:absolute;
            width:50%;
            height:60%;
            margin:0px auto;
        }
    </style>
    <div id="div_1">
        <div id="div_2">
            testing...
        </div>
    </div>

Answer 3

您可以在div內使用帶有background-image的div ，然后將其放置在div中您要使用% s而不是px或絕對值的任何位置。

 #bg{ position: relative; width:100vw; height:100vh; background-image: url('/favicon.ico'); background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 5 } #overlay { position: absolute; height: 40%; width: 30%; z-index: 10; top: 13%; left: 34% } #overlay:hover { background-color: rgba(50,50,200,0.5); } 

 <div id="bg"> <div id="overlay"></div> </div>