Pseudo-element arka plan resmi görünmüyor

Question

Üçgen kenarlıklı bir div öğem var ve ::after sözde öğesi background-image ile bir resmin üzerine yerleştirmeye çalışıyorum. Bu yöntem işe yaramıyor. Ancak, content: "asd"; ayarlamaya çalışıyorum, metin doğru görünüyor. Temel olarak sadece bu üçgenin üzerinde bir ev görüntüsüne sahip olmak istiyorum. İşte

HTML kod:

<div id = "estatecorner" class = "house"></div> 

Ve burada CSS:

İşte

#estatecorner { 
    position: absolute; 
    right: 0px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 80px 80px 0; 
    border-color: transparent #67b2e4 transparent transparent; 
} 

#estatecorner.house::after { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(images/mini/house.png); 
    content: " "; 
} 

olan bir jsFiddle

Answer 1

burada dikkat çekmek için iki şey vardı:

1. Web-tiki'nin yorumlarda bahsettiği gibi, sözde öğenin width ve height değerleri 100% olarak ayarlanmış ve ana öğenin boyutları 0px x 0px boyutlarına sahipti (çünkü üçgen, kenarlık kesmesiyle üretildi). Bu nedenle çocuğun fiili hesaplanan boyutları (sözde eleman) ayrıca 0px x 0px idi ve dolayısıyla görüntü gösterilmiyordu. Metin, normal olarak taşması nedeniyle düz metin koyarken ortaya çıktı. Bu soruna çözüm, numaralı alt öğe için & genişlikli bir açık yükseklik atamak üzere numaralı bağlantıyı atamaktır (üst öğeye & genişliğini atamak, kenarlık kesimini bozar). Sözdizimi öğesine background-image atanmışsa ve görüntünün boyutu kapsayıcıya (sözde öğe) kıyasla küçük olduğunda, arka plan resmi kapsayıcı öğeye sığdırmak için mümkün olduğu kadar tekrarlanır.Bu, background-repeat: no-repeat; ayarlanarak önlenmeli ve görüntüyü background-position özelliğini kullanmak zorunda olduğumuz üçgenin içine yerleştirerek, uygun konum değerlerini piksellere veya ihtiyaçlara bağlı olarak yüzde olarak ayarlamalıyız. Aşağıda

(yükseklik için örnek değerler ile & pozisyon genişliği) son parçası olduğunu: Bu

#estatecorner { 
 
    position: absolute; 
 
    right: 0px; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 80px 80px 0; 
 
    border-color: transparent #67b2e4 transparent transparent; 
 
} 
 
#estatecorner.house::after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 80px; 
 
    height: 80px; 
 
    background: url("http://i.imgur.com/nceI30v.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: 75% 40%; 
 
}

<div id="estatecorner" class="house"></div>

---

döndürülmüş bir sözde kullanılarak alternatif bir yaklaşım -element (CSS3 dönüşümü) yerine üçgen şeklini elde etmek için sınır kesmek.

#estatecorner { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    right: 0px; 
 
    overflow: hidden; 
 
} 
 
#estatecorner:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: -80px; 
 
    right: -80px; 
 
    height: 138.4px; 
 
    width: 138.4px; /* (80 * 1.732px) */ 
 
    background: #67b2e4; 
 
    transform: rotate(45deg); 
 
    z-index: -1; 
 
} 
 
#estatecorner.house { 
 
    background-image: url("http://i.imgur.com/nceI30v.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: 75% 35%; 
 
}

<div id="estatecorner" class="house"></div>

Answer 2

bu deneyin;

#estatecorner.house::after { 
     content: url('../img/yourimage.jpg'); 
     position: absolute; 
     left:0px; 
     width: 100%; 
     height: 100%; 
    } 

Answer 3

Bu durumda psuedo öğelerinin yüksekliğini ve genişliğini px cinsinden vermeniz ve% olarak değil.

#estatecorner.house::after { 
    position: absolute; 
    width: 14px; 
    height: 13px; 
    background: url(http://i.imgur.com/nceI30v.png) no-repeat; 
    content: " "; 
    left: 50px; 
    top: 20px; 
} 

nedeni#estatecorner0 x, 0 boyutlarına sahip olmasıdır. Yani, elemanları sonra kendi boyutları sonunda 0 x 0 yararsız olacaktır çok hangi olacak onun zikretmekte içine düştüğü sahte için 100% yükseklik ve genişliği verirsen.