Görüntü Bindirme div

tarafından My uygulama yöntemidir aşağıdakiGörüntü Bindirme div

gibi diğerleri yaptığı gibi zor bir durumla karşı karşıya gelmiş tam olarak yukarıda belirtilenle aynı, sadece tek bir fark, imajım sadece tek bir görüntü değil, büyük bir görüntü 6 küçük resimden oluşuyor, büyük bir kare görüntü oluşturmak için bir araya geliyorlar, her küçük resmin bir URL'si ekleniyor. Sadece ben ilk göreceli olarak üst div set

Aşağıdaki resimde ve 6 görüntüleri mutlak pozisyonu gibi, her şey oldukça iyi çalışıyor ama bir sorun söz konusu olduğu zaman ı olarak (benim tarayıcı yeniden boyutlandırmak çalıştığınızda mobil sürümü yerine getirmesi gerekiyor), kaplamanın konumu yanlış çalıştı.

Ve burada şu anda

<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>

uygulayan am gerçek kod Ve her bindirme sınıfı explictly görüntünün pozisyon için uygun pozisyon devlet

CSS

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

Ve her div, karşılık gelen pozisyon parametrelerine sahiptir.

Sebep her bir katman katmanının sabit genişliği ve yüksekliği olmalı, her bir ekran boyutu değişikliğini algılamak için javascript'i kullanabileceğimi biliyorum, ancak tekme işleminden önce daha akıllı bir yaklaşım olup olmadığını öğrenmek istiyorum. gerçek zamanlı yeniden boyutlandırma kullanarak Javascript

Her türlü yardım için teşekkürler ve teşekkür ederiz!

kaynak

2016-03-19 user2361494

sadece açıklama göndermeyin deneyin. Denediğiniz kodu da gönderin. – ketan

Tam olarak ne yapmak ister? – Farshid

@ketan Gösterilen kodun eksikliğinden dolayı üzgünüm, kullandığım kodu güncelledim, teşekkürler! – user2361494

<!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>

kaynak

2016-03-19 11:49:01 krishna

cevap

İlgili konular