Kategori: css

CSS ile Şeffaf Arkaplan Resmi

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;

&lt;div class=&quot;benimdiv&quot;&gt;
    &lt;h3&gt;Buraya başlık gelecek&lt;/h3&gt;
    &lt;p&gt;buraya da içerikler eklenecek…&lt;/p&gt;
&lt;/div&gt;

<h3>Buraya başlık gelecek</h3>

<p>buraya da içerikler eklenecek...</p>

</div>

CSS Örneği:

.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;
}

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

}

12 Ağustos 2015