Div

Question

'daki içeriğin arkasındaki resim

Resimlerin her zaman göründüğü ekli görüntüye benzer bir şey oluşturmaya çalışıyorum ve daha sonra içeriğin renk kaplamasıyla birlikte gösterilmesini sağlıyorum.

Şu anda resimleri div için bir arka plan olarak görüyorum, ancak bunun en iyi yolu olup olmadığından emin değilim çünkü görüntüyü div içinde doğru yükseklikte yapmak için bir yol bulamıyorum. Bu linkin adresi: mtmdevbox.com

Şimdiden teşekkürler!

HTML

<div class="homepage-content img-one"> 
    <div class="hidden-content"> 
     <h1> For Guests </h1> 
     <p> Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam reium harum sum </p> 
    </div> 
</div> 

CSS

.img-one { 
background-image: url(/wp-content/uploads/2015/07/homepage_images-03.jpg); background-repeat: no-repeat; 
width: 65%; 
background-size: 100%; 
float: right; 
clear: both;} 

screenshot of design

Answer 1

Bu ne sonra konum olduğunu düşünüyorum. Yardımcı olursa haberim olsun!

<div class="article"> 
    <div class="content"> 
    <h1> 
    This is your title 
    </h1> 
    <p> 
    This is your content 
    </p> 
    </div> 
</div> 

CSS

.article { display: block; min-height: 500px; background: url("http://placehold.it/500x500"); background-size: cover; } 
.content { display: none; margin: 0; padding: 15px; background: rgba(0, 0, 0, .5); position: relative; min-height: calc(500px - 30px); width: 30%; } 
.content h1 { margin: 0; padding: 0; } 
.article:hover .content { display: block; } 

https://jsfiddle.net/2rb18h0r/

Answer 2

Aksine elemanları yüzen yapmak yerine, konumlandırma kullanabilirsiniz. gibi bir şey: Ben Şeffaflığı 0,2 değerine ayarlamış Yukarıdaki demo

.img-one { 
 
    background-image: url("http://i.imgur.com/5BK0htU.png"); 
 
    /*background-repeat: no-repeat;*/ 
 

 
    width: 100%; 
 
    height: 300px; 
 
    position: relative; 
 
    background-size: 100%; 
 
    cursor: pointer; 
 
} 
 
.img-one .hidden-content { 
 
    position: absolute; 
 
    opacity: 0.2; 
 
    transition: all 0.4s; 
 
    left: calc(35% - 10px); 
 
    width: 65%; 
 
    height: 100%; 
 
    background: rgba(200, 200, 200, 0.4); 
 
    border-left: 10px solid white; 
 
} 
 
.img-one:hover .hidden-content { 
 
    opacity: 1; 
 
} 
 
.hidden-content h1 { 
 
    margin-left: 5%; 
 
} 
 
.hidden-content p { 
 
    width: 35%; 
 
    margin-left: 5%; 
 
}

<div class="homepage-content img-one"> 
 
    <div class="hidden-content"> 
 
    <h1> For Guests </h1> 
 
    <p>Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam 
 
     reium harum sum</p> 
 
    </div> 
 
</div>

Ancak 0'a bu ayar tam bir 'gizli' devlet sağlayacaktır.

^{display:hidden|none yerine opacity CSS kullanmaya karar verdim çünkü geçişlerde geçişler/düzgün solmaya izin vereceğim. Bunu istemezseniz, display:hidden'un başlangıç ​​durumunu ayarlayabilir ve ardından vurgulu durumda kullanabilirsiniz: display:block|inline-block}