เราสามารถตกแต่งภาพด้วย border และใช้ filter ให้ภาพดูโปร่งใส (Transparent)
สำหรับ browser IE จะใช้ propety filter:alpha(opacity=0-100)
ส่วน Firefox จะใช้ property opacity:0.0-1.0
ตัวเลขยิ่งน้อย ยิ่งดูโปร่งใส
ส่วน Firefox จะใช้ property opacity:0.0-1.0
ตัวเลขยิ่งน้อย ยิ่งดูโปร่งใส
<html>
<body>
ภาพปกติ<br />
<img src="../images/lotus.jpg" /><br />
ภาพโปร่งใส 50%<br />
<img src="../images/lotus.jpg" style="filter:alpha(opacity=50); opacity:.50" />
<body>
</html>
ผลลัพธ์<body>
ภาพปกติ<br />
<img src="../images/lotus.jpg" /><br />
ภาพโปร่งใส 50%<br />
<img src="../images/lotus.jpg" style="filter:alpha(opacity=50); opacity:.50" />
<body>
</html>
ภาพปกติ
ภาพโปร่งใส 50%
ภาพโปร่งใส 50%
เพิ่มลูกเล่นด้วย javascript (IE ใช้ this.filters.alpha.opacity=100 ส่วน Firefox ใช้ this.style.opacity=1)
ตัวอย่าง
<html>
<body>
<img src="../images/lotus.jpg"style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />
<body>
</html>
ผลลัพธ์ลองเอา mouse เลื่อนบนภาพข้างล่างนี้<body>
<img src="../images/lotus.jpg"style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />
<body>
</html>
ตัวอย่าง
<div style="margin:auto">
<div style="width:300px;height:240px;background:url(../images/lotus_big.jpg) repeat;border:1px solid white;">
<div style="width:280px;height:220px;border:10px solid white;filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;">
</div>
</div>
</div>
ผลลัพธ์ Opacity Border<div style="width:300px;height:240px;background:url(../images/lotus_big.jpg) repeat;border:1px solid white;">
<div style="width:280px;height:220px;border:10px solid white;filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;">
</div>
</div>
</div>
เราสามารถที่จะนำ style ไปสร้างเป็น class เพื่อจะได้เรียกใช้งานซ้ำได้อย่างง่ายดาย เช่น class ที่จัดรูปให้่มีกรอบสีเทา และจัดชิดซ้าย เพื่อให้เราสามารถที่จะใส่ข้อความบรรยายด้านข้างได้
ตัวอย่าง
<html>
<head>
<style type="text/css">
.imgstyle {
float:left;
border:solid 1px #CCCCCC;
padding:5px;
margin-right:10px;
}
</style>
</head>
<body>
<div style="margin:5px"><img src="../images/jusmine.jpg" class="imgstyle" /><em>มะลิ</em> เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำมาใช้ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวงมาลัย ทำเป็นดอกไม้แห้ง หรือนำมาสกัดทำน้ำมันหอมระเหย
</div>
<div style="clear:both;"></div>
<div style="margin:5px"><img src="../images/rose.jpg" class="imgstyle" /><em>กุหลาบ</em> นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้" (Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้ว
</div>
<div style="clear:both;"></div>
</body>
<html>
ผลลัพธ์<head>
<style type="text/css">
.imgstyle {
float:left;
border:solid 1px #CCCCCC;
padding:5px;
margin-right:10px;
}
</style>
</head>
<body>
<div style="margin:5px"><img src="../images/jusmine.jpg" class="imgstyle" /><em>มะลิ</em> เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำมาใช้ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวงมาลัย ทำเป็นดอกไม้แห้ง หรือนำมาสกัดทำน้ำมันหอมระเหย
</div>
<div style="clear:both;"></div>
<div style="margin:5px"><img src="../images/rose.jpg" class="imgstyle" /><em>กุหลาบ</em> นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้" (Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้ว
</div>
<div style="clear:both;"></div>
</body>
<html>
มะลิ เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำมาใช้ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวงมาลัย ทำเป็นดอกไม้แห้ง หรือนำมาสกัดทำน้ำมันหอมระเหย
กุหลาบ นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้" (Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้ว
