Question

我在网络上的图像上使用div透明叠加层时遇到了困难，就像许多其他人一样，如下所示

我的实现方法与上面提到的完全一样，只有一个区别，我的图像不仅仅是单个图像，而是由6个小图像组成的大图像，它们排成一列形成一个大的方形图像，每个小图片附有一个URL。就像下面的图片

我首先将父div设置为相对和6个图像的绝对位置，一切都运行良好但是当我尝试调整我的浏览器大小时（因为我需要实现移动版本），覆盖率＆＃ 39;的立场出错了。

这是我目前正在实施的实际代码

<div class="row">
    <div class="col-md-12 serMainDiv">
        <img class="material_shading img-responsive" src='<?php print get_stylesheet_directory_uri() . "/imgs/service_palette.png"?>'/>
        <!--overlay div-->
        <div class="overlayDiv" ng-click="serviceClick('family')"><span style="position:absolute;left: 35%;top: 38%;font-size: 20px;opacity: 0.8;font-weight: bold;">Family</span></div>
        <div class="overlayDiv2" ng-click="serviceClick('retire')"><span style="position:absolute;left: 35%;top: 38%;font-size: 20px;opacity: 0.8;font-weight: bold;">Retire</span></div>
        <div class="overlayDiv3" ng-click="serviceClick('happy')"><span style="position:absolute;left: 35%;top: 38%;font-size: 20px;opacity: 0.8;font-weight: bold;">serviceHappy</span></div>
        <div class="overlayDiv4" ng-click="serviceClick('wedding')"><span style="position:absolute;left: 35%;top: 38%;font-size: 20px;opacity: 0.8;font-weight: bold;">Wedding</span></div>
        <div class="overlayDiv5" ng-click="serviceClick('job')"><span style="position:absolute;left: 35%;top: 38%;font-size: 20px;opacity: 0.8;font-weight: bold;">Jobs</span></div>
        <div class="overlayDiv6" ng-click="serviceClick('single')"><span style="position:absolute;left: 42%;top: 38%;font-size: 20px;opacity: 0.8;font-weight: bold;">Single</span></div>
    </div>
</div>

每个叠加类都明确说明了适合图像位置的位置

CSS

.overlayDiv2{
    width: 242px;
    height: 210px;
    top: 0;
    left: 298px;
}

每个div都拥有相应的位置参数。

实现原因应该是每个覆盖层的固定宽度和高度，我知道我可以使用javascript来检测每个屏幕尺寸的变化，但只是想在开始使用之前询问是否有任何更聪明的方法通过Javascript实时调整大小

感谢并感谢所有的帮助！

Answer 1

    <!DOCTYPE html> 
<html > 
<head> 
<style type="text/css"> 
.picColor{ width:320px; 
height:240px;
 background: url(img/flower.png) no-repeat;
 border:5px solid #000000; 
} 
.picColor:hover { 
opacity:0.9; background:#FFFFFF; 
width:320px; height:240px; 
} </style>
 </head> 
<body> 
<div class="picColor"> 
</div>
 </body> 
</html>

试试这个

div

1 个答案: