files/bn/web/css/element()/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

---
title: element
slug: Web/CSS/element()
translation_of: Web/CSS/element()
---
<div>
 {{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="Summary" name="Summary">সারাংশ</h2>
<h2 id="Summary" name="Summary"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;"><span style="color: #0000cd;"><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> </span> ফাংশন এলিমে‍‌‌‍ন্টটি একটি{ {xref_cssimage}}  এর মান কে সংজ্ঞায়িত করে  যা একটি  arbitrary HTML  এলিমেন্ট থেকে উৎপন্ন হয়।এই ছবিটি জীবন্ত,  অর্থাৎ যদি HTML উপাদান পরিবর্তন করা হয় ,তবে ফলপ্রসূ মান ব্যবহারিত সিএসএস বৈশিষ্ট্যগুলো স্বয়ংক্রিয়ভাবে আধুনিকায়িত হয়ে যাবে ।</span></h2>
<p>এটি ব্যবহার এর জন্য একটি বিশেষ দৃশ্য হবে HTML এ ছবি রেনডার করা'{{HTMLELEMENT("canvas")}} , তারপর এটিকে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করবে ।</p>
<p>গেকো ব্রাউজার এ আপনি নন- স্ট্যান্ডর্ডটি ব্যবহার করতে পারেন ।  {{domxref("document.mozSetImageElement()")}} এই পদ্ধতিটি একটি দেয়া সিএসএস ব্যাকগ্রাউন্ড এর ব্যাকগ্রাউন্ড হিসেবে ব্যবহৃত হওয়া এলিমেন্ট এর পরিবর্তন করে।</p>
<h2 id="Syntax" name="Syntax">পদবিন্যাস</h2>
<pre class="syntaxbox notranslate">element( <em>id</em> )</pre>
<p>যেখানে,</p>
<dl>
 <dt>
  <strong><code>id</code></strong></dt>
 <dd>
  একটি এলিমেন্ট এর ID কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে ,বিশেষ করে এলিমেন্ট এর উপর HTML attribute #id ব্যবহার  করা হয়।</dd>
</dl>
<h2 id="Examples" name="Examples">উদাহরন</h2>
<p>এই উদাহরনগুলো <a href="https://developer.mozilla.org/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">viewed live</a> এ দেখা যাবে <span style="line-height: 1.5;">builds of Firefox এ যা </span><code style="font-style: normal; line-height: 1.5;">-moz-element() সহায়তা করে।</code></p>
<h3 id="কিছু_বাস্তব_উদাহরন">কিছু বাস্তব উদাহরন</h3>
<p>এই উদাহরনটি একটি লুকানো {{HTMLElement("div")}} কে ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করে।ব্যাকগ্রাউন্ড এলিমেন্টটি একটি নতি ব্যবহার করে কিন্তু সেই সাথে টেক্সট ও অন্তর্ভুক্ত করে যা ব্যাকগ্রাউন্ড এর অংশ হিসেবে রেনডার করা হয়।</p>
<pre class="brush: html notranslate">&lt;div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"&gt;
  &lt;p&gt;This box uses the element with the #myBackground1 ID as its background!&lt;/p&gt;
&lt;/div&gt;

&lt;div style="overflow:hidden; height:0;"&gt;
  &lt;div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"&gt;
  &lt;p style="transform-origin:0 0; transform: rotate(45deg); color:white;"&gt;This text is part of the background. Cool, huh?&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<p> {{HTMLElement("div")}} এলিমেন্টের সাথে  ID "myBackground1" কনটেন্ট এর  ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয় যেখানে "This box uses the element with the #myBackground1 ID as its background!" এই অনুছেদটি অন্তর্ভুক্ত করা হয়।</p>
<p><img alt="example1.png" class="internal default" src="/@api/deki/files/4624/=example1.png"></p>
<h3 id="আরও_কিছু_অদ্ভুত_উদাহরন">আরও কিছু অদ্ভুত উদাহরন</h3>
<p>এই উদাহরনটি একটি লুকানো {{HTMLElement("button")}} এলিমেন্ট কে পুনরাবৃওি নমুনায় ব্যাকগ্রাউনড হিসেবে ব্যবহার করে।এটি প্রমান করে যে আপনি ব্যাকগ্রাউন্ড হিসেবে arbitrary এলিমেন্ট ব্যবহার করতে পারেন কিন্তু ভাল নকশা অনুশীলনে ততটা প্রয়োজনীয় নয়।</p>
<pre class="brush: html notranslate">&lt;div style="width:400px; height:100px; background:-moz-element(#myBackground2);"&gt;
&lt;/div&gt;

&lt;div style="overflow:hidden; height:0;"&gt;
  &lt;button id="myBackground2" type="button"&gt;Evil button!&lt;/button&gt;
&lt;/div&gt;
</pre>
<p><img alt="example2.png" class="internal default" src="/@api/deki/files/4625/=example2.png"></p>
<h2 id="নির্দিষ্টকরন">নির্দিষ্টকরন</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="http://dev.w3.org/csswg/css4-images/" title="http://dev.w3.org/csswg/css4-images/">CSS Image Values and Replaced Content Level 4</a></td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>Actually now deferred to CSS4.</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ব্রাউজার সুসঙ্গত</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox (Gecko)</th>
    <th>Chrome</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>4.0 (2.0) [*] {{property_prefix("-moz")}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Android</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>4.0 (2.0) [*] {{property_prefix("-moz")}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>[*] ব্যবহৃত {{cssxref("background")}} এবং {{cssxref("background-image")}} সিএসএস বৈশিষ্ট্গুলোর জন্য সিমাবদ্ধ।</p>
<h2 id="আরও_দেখুন">আরও দেখুন</h2>
<ul>
 <li>{{domxref("document.mozSetImageElement()")}}</li>
</ul>