क्या सीएसएस के साथ पृष्ठभूमि के रूप में उपयोग पाठ का उपयोग करने का एक तरीका है?

Question

मैं अपने टैग में कुछ तत्वों की पृष्ठभूमि के रूप में गतिशील पाठ का उपयोग करना चाहूंगा। इस वजह से, मैं छवियों (गतिशील पाठ) का उपयोग कर सकता हूं। मैं इसे केवल सीएसएस या जावास्क्रिप्ट के साथ कैसे करूं?

Answer 1

आपके पास आपके रिश्तेदार द्वारा तैनात तत्व के अंदर एक बिल्कुल तैनात तत्व हो सकता है:

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

और फिर सीएसएस:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

यहाँ इसका एक उदाहरण है ।

Answer 2

एसवीजी टेक्स्ट बैकग्राउंड इमेज

body {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>I love SVG!</text></svg>");
}

<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>

यहां CSS का एक इंडेंटेड वर्जन दिया गया है ताकि आप बेहतर तरीके से समझ सकें। ध्यान दें कि यह काम नहीं करता है , आपको इसके बजाय ऊपर के स्निपेट से एकल लाइनर एसवीजी का उपयोग करने की आवश्यकता है:

body {
  background-image:url("data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1'
       height='50px' width='120px'>
    <text x='0' y='15' fill='red' font-size='20'>I love SVG!</text>
  </svg>");
}

यह सुनिश्चित नहीं है कि यह कितना पोर्टेबल है (फ़ायरफ़ॉक्स 31 और क्रोम 36 पर काम करता है), और यह तकनीकी रूप से एक छवि है ... लेकिन स्रोत इनलाइन और सादा पाठ है, और यह असीम रूप से तराजू है।

@senectus ने पाया कि यह IE पर बेहतर काम करता है यदि आप इसे आधार बनाते हैं तो इसे इनकोड करें : https://stackoverflow.com/a/25593531/895245

Comments

दिलचस्प। मुझे यह केवल फ़ायरफ़ॉक्स 31 में काम करने के लिए मिल सकता है, लेकिन क्रोम 36 या सफारी 7. नहीं

— जेपी रिचर्डसन

@JPRichardson सच, यहाँ भी। Chrome 36 पर मुझे आभास है कि पृष्ठभूमि वहां है, लेकिन बहुत छोटे अक्षरों पर। शायद मैं कुछ पृष्ठभूमि / एसवीजी आकार पैरामीटर सेट करना भूल रहा हूं?

— सिरो सेंटिल्ली 郝海东 i iro i 法轮功 '

हां, मैं इस समय इसके साथ प्रयोग कर रहा हूं ... शायद "व्यूबॉक्स" जैसा दिखता है? मैं अभी भी इसके साथ खिलवाड़ कर रहा हूँ।

— जेपी रिचर्डसन

Ciro: आपके उत्तर के आधार पर मैं इसे एक साथ रखने में सक्षम था ... बहुत अच्छा काम किया! धन्यवाद! codepen.io/jprichardson/pen/GnxKr

— JP रिचर्डसन

@CiroSantilli 烏坎 iro 2016 事件!! महान जवाब! क्या आपके पास Chrome पर रेंडरिंग को बेहतर बनाने के बारे में कोई विचार है? यह वहाँ वास्तव में बुरा लग रहा है। अग्रिम धन्यवाद

— एलेजांद्रो गार्सिया इग्लेसियस 19

Answer 3

पहले छद्म तत्वों के बाद: यह संभव हो सकता है (लेकिन बहुत हैकिश) केवल CSS का उपयोग करके:

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<div class="bgtext">
  Foreground text
</div>

यह काम करने लगता है, लेकिन आपको इसे थोड़ा कम करना होगा। यह भी ध्यान दें कि यह IE6 में काम नहीं करेगा क्योंकि यह समर्थन नहीं करता है :after।

Comments

अद्यतन: अभी तक, सभी आधुनिक ब्राउज़र छद्म तत्वों का समर्थन करते हैं। उदाहरण के लिए कि FontAwesome CSS आइकनों के लिए कैसे काम करता है (इनलाइन तत्वों पर पहले:)।

— सेड्रिक फ्रांकोइस

बस इस बात से अवगत रहें कि फ़ायरफ़ॉक्स अनुमति नहीं देता है: पहले और: उन तत्वों पर जो आंतरिक सामग्री नहीं रख सकते हैं, जैसे इनपुट फ़ील्ड। यह आधिकारिक सीएसएस युक्ति का सम्मान करता है।

— निकोलस बोलियान

Answer 4

एक एसवीजी डेटा यूआरआई पृष्ठभूमि के बारे में पाठ युक्त Ciro का समाधान बहुत चालाक है।

हालाँकि, यह IE में काम नहीं करेगा यदि आप डेटा यूआरआई में सिर्फ सादा एसवीजी स्रोत जोड़ते हैं।

इसके चारों ओर पाने के लिए और IE9 और इसके बाद के संस्करण में काम करने के लिए, SVG को base64 में एन्कोड करें। यह एक महान उपकरण है।

तो यह:

background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5%" y="5%" font-size="30" fill="red">I love SVG!</text></svg>');

यह बन जाता है:

background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');

परीक्षण किया गया और यह IE9-10-11, वेबकीट (क्रोम 37, ओपेरा 23) और गेको (फ़ायरफ़ॉक्स 31) में काम करता है।

http://jsfiddle.net/qapp5dLn/

Comments

यह एक बेहतर उपकरण है: jpillora.com/base64-encoder simpile, कोई त्रुटि नहीं, स्वतः भरण, छवि पूर्वावलोकन। हां, यह छलांग और सीमा में बेहतर है।

— जैक गिफिन

Answer 5

@Ciro

आप इनलाइन svg कोड को बैक-स्लैश से तोड़ सकते हैं "\"

क्रोम 54 और फ़ायरफ़ॉक्स 50 में नीचे दिए गए कोड के साथ परीक्षण किया गया

body {
    background: transparent;
    background-attachment:fixed;
    background-image: url(
    "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
    <rect x='0' y='0' width='170' height='50' style='stroke:white; fill:gray; stroke-opacity: 0.3; stroke-width: 3px; fill-opacity: 0.7; stroke-dasharray: 10 5; stroke-linecap=round; '/> \
    <text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font-size='16' transform='rotate(10,85,25)'>I love SVG!</text></svg>");
}

मैंने यह भी परीक्षण किया,

background-image: url("\
data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
    <rect x='0' y='0' width='170' height='50'\
      style='stroke:white; stroke-width: 3px; stroke-opacity: 0.3; \
             stroke-dasharray: 10 5; stroke-linecap=round; \
             fill:gray;  fill-opacity: 0.7; '/> \
    <text x='85' y='30' \
      style='fill:lightBlue; text-anchor: middle' font-size='16' \
      transform='rotate(10,85,25)'> \
      I love SVG! \
    </text> \
  </svg>\
");

और यह काम करता है (कम से कम क्रोम ५४ और फ़ायरफ़ॉक्स ५० ==> NWjs और इलेक्ट्रॉन guarenteed में उपयोग)

Answer 6

शुद्ध सीएसएस का उपयोग करना:

(लेकिन इसका उपयोग दुर्लभ अवसरों में करें, क्योंकि HTML विधि पूर्वनिर्मित रास्ता है )।

.container{
	position:relative;
}
.container::before{ 
	content:"";
	width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1;  top: 0;   left: 0;
	background: black;
}
.container::after{ 
	content: "Your Text"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; font-size: 2em; color: red;    text-align: center; text-shadow: 0px 0px 5px black; background: #0a0a0a8c; padding: 5px;
	animation-name: blinking;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

<div class="container">here is main content, text , <br/> images and other page details</div>

Answer 7

आप उस तत्व को बना सकते हैं जिसमें bg पाठ का कम स्टैकिंग ऑर्डर (z-index, स्थिति) हो और संभवतः अस्पष्टता भी हो। तो आपको जिस तत्व की आवश्यकता होगी, उसे उच्च स्टैकिंग ऑर्डर (z-index: 5; स्थिति: रिश्तेदार; पूर्व के लिए) की आवश्यकता होगी और पीछे वाले तत्व को कुछ कम (डिफ़ॉल्ट या सिर्फ 3 और स्थिति जैसे निचले z- इंडेक्स की आवश्यकता होगी: सापेक्ष ;)।

Answer 8

मुझे उम्मीद है कि यह आपकी मदद कर सकता है

<!DOCTYPE html>
<html>
<head>
<style>

 :root:after { 
         
            content: "Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark   Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark "; 
            position: fixed; 
            transform: rotate(300deg); 
            -webkit-transform: rotate(300deg); 
            color: rgb(187, 182, 182); 
            top:0;                     
            z-index: -1; 
        } 
</style>
</head>
<body>
<p>hey my name is JHM</p>
</body>
</html>