V odkazoch CSS vidím ako nastaviť priehľadnosť obrázka a ako nastaviť obrázok na pozadí. Ako však môžem tieto dva spôsoby skombinovať, aby som nastavil priehľadný obrázok na pozadí?
Mám obrázok, ktorý by som chcel použiť ako pozadie, ale je príliš svetlý - chcel by som znížiť nepriehľadnosť na približne 0,2. Ako to môžem urobiť?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
#main {
position: relative;
}
#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
Dve metódy:
<div>
, ktorý je position: absolute;
pred #main
a má rovnakú výšku ako #main
, potom použite obrázok na pozadí a opacity: 0.2; filter: alpha(opacity=20);
.