Wednesday, April 28, 2021

CSS Image Property in HTML - In Hindi

 

CSS Image Property

CSS द्वारा भी Image को Optimize करने के लिए CSS Image Property को बनाया गया हैं।CSS Image Property से Webpage में Insert Images का Size, Border, Opacity आदि कि Setting कर सकते हैं। Images का Alignment Set करना और Display Size के अनुसार Responsive बनाने का कार्य भी CSS Image Property द्वारा किया जा सकता हैं।

Different Types of Image Properties

CSS द्वारा Image Display को Control करने के लिए अलग-अलग Image Properties Provide कराती हैं।

Border Property

Border Property का प्रयोग Image के लिए Border Declare करने के लिए किया जाता हैं। Border की चौडाई, उसका प्रकार, Color आदि Declare कर सकते हैं। 

Border Syntax

border: width type color

Border Syntax में तीन Values होती हैं-

  1. Width – Border Width का मतलब है Border की मोटाई कितनी हैं। इसे Pixels में Declare कर सकते हैं।
  2. Type – Border की मोटाई के बाद Border का प्रकार Declare करते हैं। Dotted, dashed, double और solid प्रकार की Border Declare कर सकते हैं।
  3. Color – Border Color Property द्वारा Border का Color Declare किया जाता हैं। जिसे Color Name, Hex Value आदि Units में Declare कर सकते हैं। 
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”border: 3px solid red;” src=”Image-Path” >
</body>
</html>

Border Radius Property

Border से संबंधित एक और Property होती हैं। जिसका नाम हैं Border Radius Property. इसके द्वारा Border के कोनों की गुलाई Declare की जाता हैं।

<!DOCTYPE html>
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”border: 3px solid red;” radius=”50%” src=”Image-Path” >
</body>
</html>
OUTPUT-

Height and Width Property

Height Property द्वारा Image की ऊँचाई Declare की जाती हैं। Height को Pixels में और प्रतिशत % में Declare कर सकते हैं।

इसी तरह Width Property द्वारा Image की चौडाई Declare की जाती हैं। इसे भी Pixels और Percentage में Declare कर सकते हैं।

Pixels में Declare Height और Width Absolute रहती हैं। और Percentage में Declare Height और Width Responsive रहती हैं।

<!DOCTYPE html>
<html>
<head>
<title>CSS Image Border</title>
<body>
</body>
</head>
<img style=”height: 75px; widht: 100px;” src=”tutorial-pandit.logo.png” >
</html>
OUTPUT-

Opacity Property

Image Opacity Property द्वारा Image की Clarity Set करते हैं। और Image को Transparent भी बनाते हैं। इसकी Value 0.1 से लेकर 1 तक हो सकती हैं।

<!DOCTYPE html>
<html>
<head>
<title>CSS Image Border</title>
</head>
<body>
<img style=”opacity: .3″ src=”tree.png” >
</body>
</html>
OUTPUT-


<<Prev  ||  Next >>


For Any Doubt Clear on Telegram Discussion Group


Join Us On Social Media
For Any Query @8604799387

No comments:

Post a Comment

Transmission Media in Hindi - Sunrise Computer

TRANSMISSION MEDIA Transmission Media सूचना को Sender से Receiver तक पहुँचाने का माध्यम Transmission Media कहलाता है। यह दो प्रकार का होता...