Question

＆＃13;

    *{
    	margin: 0;
    	padding: 0;
    }
    
    .container{
    	height: 638px;
    	width: 100%;
    	max-width: 100%;
    	position: absolute;
    	overflow: hidden;
    	background-position: center;
    	top: 0;
    	z-index: -1;
    }
    
    .container img{
    	width: 100%;
    	height: 638px;
    }
    
    .container #short-des{
    	background: rgba(0,0,0,.5);
    	height: 400px;
    	width: 500px;
    	position: relative; 
    }

＆＃13;

    	<div class="container">
    	<img src="cover.jpg">
    	<div id="short-des">
    	
    </div>
    </div>

＆＃13;

我希望short-des div在中心可见的图像上我尝试了z-index但是它不起作用。请帮助我解决这个问题，以便我将来会采取这些措施

Answer 1

将div left置于与图像重叠的位置。使用top / right / bottom / <body>属性设置其位置。

它的位置将相对于最接近的非静态（绝对/相对/固定）定位元素或#short-des, #short-des2 { position: absolute; left: 90px; top: 50px; width: 50px; height: 50px; background-color: rgba(100, 250, 100, .6); z-index: 7; } #short-des2 { z-index: 8; left: 100px; top: 55px; background-color: rgba(250, 100, 100, .7); } .wrapper { margin: 50px; position: relative; }

<div class="wrapper">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
  <div id="short-des"></div>
  <div id="short-des2"></div>
  </div>

DB::table('users')->insert([  
    ['email' => 'taylor@example.com', 'votes' => 0],
    ['email' => 'dayle@example.com', 'votes' => 0]
]);

Answer 2

您可以将图像作为容器div [.container]的背景添加为

    .container{
        background: url('path/to/image'); // eg. 'cover.jpg'
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 638px;
        width: 100%;
        max-width: 100%;
        position: absolute;
        overflow: hidden;
        background-position: center;
        top: 0;
        z-index: -1;
    }

并从html中删除<img>

    <div class="container">
        <div id="short-des"></div>
    </div>

Answer 3

试试这个......

只需设置position : absolute，然后使用top和left CSS属性设置位置。

* {
  margin: 0;
  padding: 0;
}
.container {
  height: 638px;
  width: 100%;
  max-width: 100%;
  position: absolute;
  overflow: hidden;
  background-position: center;
  top: 0;
  z-index: -1;
}
.container img {
  width: 100%;
  height: 638px;
}
.container div#short-des {
  background: rgba(0, 0, 0, .5);
  height: 40px;
  width: 50px;
  top:40%;
  left:50%;
  position: absolute;
  z-index:999;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div class="container">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    <div id="short-des">

    </div>
  </div>
</body>

</html>

Answer 4

.container{
    height: 638px;
    width: 100%;
    max-width: 100%;
    position: absolute;
    overflow: hidden;
    background-position: center;
    top: 0;
    z-index: -1;
}
.box {
    position: relative;
    width: 638px;
    height: 300px;
}
.box img{
    width: 100%;
    height: 500px;
}

.box #short-des{
    background: rgba(0,0,0,.5);
    height: 400px;
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -250px;
}

<div class="container">
  <div class="box">

    <div id="short-des">

    </div>
    <img src="http://www.slowtrav.com/blog/girasoli/IMG_6820.JPG">
    <div id="short-des">
    </div>
  </div>

</div>

http://codepen.io/rizwanmughal/pen/KgZQRx

如何在图像上看到Div

4 个答案: