Normalde kullandığınız resimlerin şeffaflığını CSS ile ayarlayabiliyorsunuz. Ancak arkaplan(background-image) için bu özellik mevcut değil.
Arkaplan resminin şeffaflığını ayarlayabilmek için ufak bir hileye başvurmamız gerek. CSS’de pseudo element(sözde de denebilir) denen bir olay var. Biz de bundan yararlanacağız. Şöyle ki;
1 2 3 4 |
<div class="benimdiv"> <h3>Buraya başlık gelecek</h3> <p>buraya da içerikler eklenecek...</p> </div> |
CSS Örneği:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.benimdiv { position: relative; background: #fff; overflow: hidden; } /** :after yerine :before de kullanılabilir **/ .benimdiv:after { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5; background-image: url('images/arkaplan.jpg'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } |