إدراج صورة
<img src="png-transparent.png" width="165" height="165" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" />
إدراج صورة بدون تحديد الطول والعرض
<img src="png-transparent.png" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" />
إدراج صورة تتمدد بواسطة HTML
<img src="png-transparent.png" width="400" height="200" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" />
إدراج صورة مع نمط داخل رابط
<a href="#" onclick="return false;">
<img src="png-transparent.png" width="165" height="165" title="صورة بصيغة PNG شفافة" alt="صورة بصيغة PNG شفافة" style="border:2px dashed #090;padding:10px;margin:10px;" />
</a>
إدراج صورة خلفية لرابط تتغير بمجرد مرور الفأرة
<style type="text/css">
.link-image-background-hover a
{
display:block;
width: 165px;
height: 165px;
background: transparent url(png-transparent.png) no-repeat;
}
.link-image-background-hover a:hover
{
background-color: red;
}
</style>
<a dir="ltr" href="#" onclick="return false;">رابط لا يؤدي إلى أي مكان</a>
إدراج صورة كخلفية متكررة
هذه تقسيمة div تكون صورة PNG شفافة خلفية متكررة لها.
<div style="height:340px;background: transparent url(png-transparent.png) repeat;">هذه تقسيمة div تكون صورة PNG شفافة خلفية متكررة لها.</div>
إدراج صورة كخلفية في أسفل اليمين
هذه تقسيمة div تكون صورة PNG شفافة خلفية لها في أسفل اليمين.
<div style="height:200px;background: transparent url(png-transparent.png) no-repeat bottom right;">هذه تقسيمة div تكون صورة PNG شفافة خلفية لها في أسفل اليمين.</div>