Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS3 का उपयोग करके छवियों में अस्पष्टता लागू करना

<घंटा/>

CSS3 के साथ इमेज में अपारदर्शिता लागू करने के लिए, फ़िल्टर प्रॉपर्टी के लिए अपारदर्शिता मान का उपयोग करें।

उदाहरण

आइए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: opacity(60%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

आउटपुट

CSS3 का उपयोग करके छवियों में अस्पष्टता लागू करना


  1. CSS3 का उपयोग करके व्यक्तिगत फ्लेक्स आइटम को पुन:व्यवस्थित करना

    CSS3 का उपयोग करके अलग-अलग फ्लेक्स आइटम को पुन:व्यवस्थित करने के लिए, ऑर्डर प्रॉपर्टी का उपयोग करें। फ्लेक्स आइटम को फिर से व्यवस्थित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Ge

  1. CSS3 का उपयोग करके तत्वों का 2D परिवर्तन

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक

  1. CSS3 का उपयोग करके वर्ड ब्रेकिंग नियम निर्दिष्ट करें

    CSS3 में वर्ड ब्रेकिंग नियम निर्दिष्ट करने के लिए, वर्ड-ब्रेक प्रॉपर्टी का उपयोग करें। इस गुण का उपयोग रेखा को तोड़ने के लिए किया जाता है। संभावित मूल्यों में सामान्य, ब्रेक-ऑल, कीप-ऑल, ब्रेक-वर्ड, आदि शामिल हैं। CSS3 का उपयोग करते हुए वर्ड ब्रेकिंग नियमों को निर्दिष्ट करने के लिए कोड निम्नलिखित है