Question

我无法让我的图片响应。它是位于另一个图像上方的图像，因此我使用绝对定位。如果我让页面变得更小，那么一切都会变得糟透了。

这是我对另一张图像上方图像的css。

.page-header .logo img {
   position: absolute;
   top: 240%;
   left: 126%;
   width: 200px;
   height: 150px;
   padding:1px;
   border:1px solid #021a40;
   background-color:#000;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

这是它背后图像的CSS。

.page .carousel img {
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

如何使上面的图像正确调整其背后的图像？

Answer 1

这是一个小小提琴，我把它放在一起让你更接近。根据徽标的大小，您必须稍微调整一下百分比才能得到您想要的内容。

<强> HTML

<div class='page-header'>
    <div class='carousel' id='portfolio-carousel'>
        <img alt="1396051485478" src="http://www.placehold.it/650x350" class="bg" />
    </div>
    <div class="logo-wrap">
        <img alt="Logo" src="http://www.placehold.it/250x150" class="logo" />
    </div>
</div>

<强> CSS

.page-header {
    position:relative;
    width:100%;
}

.logo-wrap {
    width:100%;
    position:absolute;
    margin-top:-43%;
}

.logo {
    position: absolute;
    padding:1px;
    border:1px solid #021a40;
    background-color:#000;
    top:22%;
    left:25%;
    width:50%;

}

.carousel {
    position:relative;
    width:100%;
}


.bg {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    width:100%;
}

<强>小提琴 http://jsfiddle.net/disinfor/9b332ghd/4/

我相信这会让你得到你想要的东西。另外，在我为您排除故障时，我可能已经更改了一些课程名称。

我的绝对形象需要有回应

1 个答案: