CSS - การใช้รูปภาพ

รูปภาพมีบทบาทสำคัญในหน้าเว็บใด ๆ แม้ว่าจะไม่แนะนำให้ใส่รูปภาพจำนวนมาก แต่ก็ยังควรใช้รูปภาพที่ดีในทุกที่ที่ต้องการ

CSS มีบทบาทที่ดีในการควบคุมการแสดงภาพ คุณสามารถตั้งค่าคุณสมบัติรูปภาพต่อไปนี้โดยใช้ CSS

border คุณสมบัติถูกใช้เพื่อกำหนดความกว้างของเส้นขอบรูปภาพ
height คุณสมบัติถูกใช้เพื่อกำหนดความสูงของรูปภาพ
width คุณสมบัติถูกใช้เพื่อกำหนดความกว้างของรูปภาพ
-moz-opacity คุณสมบัติถูกใช้เพื่อตั้งค่าความทึบของภาพ

คุณสมบัติของ Image Border

ชายแดนคุณสมบัติของภาพที่ใช้ในการกำหนดความกว้างของเส้นขอบภาพ คุณสมบัตินี้สามารถมีค่าเป็นความยาวหรือเป็น%

ความกว้างของพิกเซลศูนย์หมายความว่าไม่มีเส้นขอบ

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:3px dashed red;" src = "/css/images/logo.png" />
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติความสูงของภาพ

สูงคุณสมบัติของภาพที่ใช้ในการตั้งค่าความสูงของภาพ คุณสมบัตินี้สามารถมีค่าเป็นความยาวหรือเป็น% ในขณะที่ให้ค่าเป็น% แต่จะใช้กับช่องที่มีรูปภาพ

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติความกว้างของภาพ

กว้างคุณสมบัติของภาพที่ใช้ในการกำหนดความกว้างของภาพ คุณสมบัตินี้สามารถมีค่าเป็นความยาวหรือเป็น% ในขณะที่ให้ค่าเป็น% แต่จะใช้กับช่องที่มีรูปภาพ

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสมบัติ -moz-opacity

คุณสมบัติ-moz-opacityของรูปภาพใช้เพื่อตั้งค่าความทึบของรูปภาพ คุณสมบัตินี้ใช้เพื่อสร้างภาพโปร่งใสใน Mozilla IE ใช้filter:alpha(opacity=x) เพื่อสร้างภาพโปร่งใส

ใน Mozilla (-moz-opacity: x) x สามารถมีค่าได้ตั้งแต่ 0.0 - 1.0 ค่าที่ต่ำกว่าทำให้องค์ประกอบโปร่งใสยิ่งขึ้น (สิ่งเดียวกันนี้ใช้กับความทึบของไวยากรณ์ที่ถูกต้อง CSS3: x)

ใน IE (ตัวกรอง: alpha (opacity = x)) x อาจมีค่าตั้งแต่ 0 - 100 ค่าที่ต่ำกว่าจะทำให้องค์ประกอบโปร่งใสมากขึ้น

นี่คือตัวอย่าง -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -