Forum'da ara:
Ara


Yazar Mesaj
Mesaj07.07.2017, 08:29 (UTC)    
Mesaj konusu: opacitiy sorunu yardım
Alıntıyla Cevap Gönder
Arkadaşlar merhaba ben bi elemente opacitiy uyguladığım zaman diğer elementide etkiliyory ani mesela bir yuvarlak divin içi siyaha boyalı diyelim onun içindede bir resim var diyelim siyaha boyalı dive opacitiy verdiğiniz zaman resmide etkiliyor yani resimde şeffaf oluyor bunu nasıl engelleyebiliriz bi yardımcı olursanız sevinirim ?
↑
Mesaj08.07.2017, 19:19 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
Merhabalar dostum,
Eğer iki divi iç içe kullanırken dıştaki dive bir opacity değeri verirsen içteki divide doğrudan etkiler. Bu sorunda kod sistemini inceleyelim.

Normalde CSS
Kod:
<style>
.anaDiv {
   width: 230px;
   height: 230px;
   -webkit-border-radius: 115px; -moz-border-radius: 115px; border-radius: 115px;
   background: #000;
   opacity: 0.1;
}
.altDiv img{
   width: 180px;
   height: 180px;
   -webkit-border-radius: 120px; -moz-border-radius: 120px; border-radius: 120px;
   padding: 25px;
}
</style>


Normalde HTML

Kod:
<div class="anaDiv">
<div class="altDiv">
   <img src="http://merttopuz.com/assets/images/profil.jpg" alt="Mert Topuz" title="Mert Topuz">
</div>
</div>


Şimdi biz bu durumu şöyle aşabiliriz.

SONUÇ;


AÇIKLAMA;
Eğer altta kalmasını istediğimiz divi boş bir div haline getirip resmin arkasına koyarsak problemimiz çözülür;

Yeni CSS
Kod:
.anaDiv {
   width: 230px;
   height: 230px;
   -webkit-border-radius: 115px; -moz-border-radius: 115px; border-radius: 115px;
   background: #000;
   position: absolute;
   z-index: -1;
   opacity: 0.1;
}
.altDiv img{
   width: 180px;
   height: 180px;
   -webkit-border-radius: 120px; -moz-border-radius: 120px; border-radius: 120px;
   padding: 25px;
}


YENİ HTML
Kod:
<div class="anaDiv"></div>
<div class="altDiv">
   <img src="http://merttopuz.com/assets/images/profil.jpg" alt="Mert Topuz" title="Mert Topuz">
</div>


SONUÇ;
↑
Mesaj09.07.2017, 12:02 (UTC)    
Mesaj konusu: bu yalnız
Alıntıyla Cevap Gönder
Kod:
<div class="anaDiv"></div>
<div class="altDiv">
   <img src="http://merttopuz.com/assets/images/profil.jpg" alt="Mert Topuz" title="Mert Topuz">
</div>


yalnız bu yukarda yazdığınız kodu yazdığımız zaman anaDiv kutusu alt div kutusunun dışında kaldığı için alt div aşağıya doğru iniyor yani ana div kutusunun içinde kalmıyor o nasıl olucak ?
↑
Mesaj09.07.2017, 19:11 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
Yeni CSS kodumuzda belirttiğimiz üzere anaDiv'e
Kod:
position: absolute;
z-index: -1;

dediğimiz için otomatik olarak alta geçmiş oluyor.
↑
Mesaj13.07.2017, 12:45 (UTC)    
Mesaj konusu:
Alıntıyla Cevap Gönder
grafikdizayn yazmış:
Yeni CSS kodumuzda belirttiğimiz üzere anaDiv'e
Kod:
position: absolute;
z-index: -1;

dediğimiz için otomatik olarak alta geçmiş oluyor.



teşekkür ederim..
↑
Önceki mesajları göster:   
  • 1. sayfa (Toplam 1 sayfa)

  •  
    • Geçiş Yap:  


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu

© 2024 webme GmbH, Almanya, Tüm hakları saklıdır.