首页 文章

将div放在图像顶部

提问于
浏览
0

好的,所以我想在另一个有背景图像的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来覆盖image-div . 让div适合很容易,只需将位置设置为绝对位置并设置顶部,左侧,宽度和高度,但只要我以另一个分辨率/密度显示,div就会消失,这并不奇怪 . 所以我尝试使用%或vh和vw定位,但似乎没有任何工作 .

无论我使用什么设备,分辨率和密度,我如何在图像上定位div?

3 回答

  • 0

    它是 background-positionbackground-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>
    

    或者查看这个fiddle

  • 1

    您可以在 div 内部使用 div background-image ,但是然后使用 % ,而不是 px 或绝对值将其放置在div中的任何位置 .

    #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>
    
  • 0
    <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>
    

相关问题