• Skip to primary navigation
  • Skip to main content

  • Home
  • Tutorials
    • Computer Tutorial
    • Internet Tutorial
    • Windows Tutorial
    • Android Tutorial
    • MS Office
      • MS Word Tutorial
      • MS Excel Tutorial
      • MS PowerPoint Tutorial
    • HTML Tutorial
    • CSS Tutorial
    • WordPress Tutorial
    • Blogger Tutorial
    • MS Paint Tutorial
    • WordPad Tutorial
    • Notepad Tutorial
    • Paytm Tutorial
    • WhatsApp Tutorial
  • How To
  • Articles
  • Career Guide
  • Video Tutorials
  • Books
  • Courses

CSS Image Property in Hindi की पूरी जानकारी.

अंतिम सुधार August 18, 2018 लेखक TP Staff

इस Tutorial में हम आपको CSS Image Property की पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को कई भागों में बांटा हैं.

Table of Content

  1. CSS Font Property का परिचय – Introduction to CSS Image Property in Hindi.
  2. Different Type of CSS Image Properties in Hindi.
    • border Property
    • height & width Property
    • opacity Property
  3. आपने क्या सीखा?

CSS Image Property का परिचय

आप एक वेबपेज में Image की Importance क्या होती हैं? अच्छी तरह से जानते होंगे. इसलिए 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 द्वारा किया जा सकता हैं.

विभिन्न प्रकार की Image Properties

CSS द्वारा Image Display को Control करने के लिए अलग-अलग Image Properties Provide कराती हैं. जिनके नाम और कार्यों की जानकारी नीचे दी जा रही हैं.

border Property

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

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 कर सकते हैं. Color के बारे में ज्यादा जानकारी के लिए आप CSS Color Property को पढ सकते हैं.
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Border</title>

</head>
<body>

<img style=”border: 3px solid red;” src=”tutorial-pandit.logo.png” >
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.



TurorialPandit Logo

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=”tutorial-pandit.logo.png” >
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.



TutorialPandit Logo

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>

</head>
<body>

<img style=”height: 75px; widht: 100px;” src=”tutorial-pandit.logo.png” >
</body>

</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

TutorialPandit Logo

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>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.



Tree पेड वृक्ष

आपने क्या सीखा?

इस Tutorial में हमने आपको CSS Image Property के बारे में जानकारी दी हैं. आप Image की Height & Width Set करना भी सीख गए हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.

About TP Staff

लेखक: TP Staff

TP Staff, TutorialPandit की कम्प्यूटर और टेक्नोलॉजी पेशेवरों की टीम है, जिसका नेतृत्व जी पी गौतम द्वारा किया जाता है. TutorialPandit के माध्यम से भारत देश में हर साल लाखों लोग फ्री डिजिटल शिक्षा ग्रहण कर रहे है.

Join TutorialPandit on Telegram
Free Computer Literacy Course

Reader Interactions

Comments

  1. Ankush Dubey says

    June 25, 2020 at 5:29 pm

    Nice content and matter. Please give us a PDF of all tags and information about CSS

    Reply
    • TP Staff says

      June 25, 2020 at 9:13 pm

      अंकुश जी, हम पीडीएफ उपलब्ध नही करवा रहे है. फिलहाल तो आपको ऑनलाइन ही काम चलाना पड़ेगा.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© Copyright TutorialPandit. All Rights Reserved.

  • About Us
  • Contact Us
  • Terms
  • Privacy Policy
  • Comment Policy