সিএসএস সহ পটভূমি হিসাবে পাঠ্য ব্যবহার করার কোনও উপায় আছে কি?

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>

এখানে সিএসএসের ইনডেন্টেড সংস্করণ রয়েছে যাতে আপনি আরও ভাল করে বুঝতে পারেন। মনে রাখবেন যে এটি কাজ করে না , পরিবর্তে উপরের স্নিপেট থেকে আপনার একক লাইনার এসভিজি ব্যবহার করতে হবে:

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>");
}

এটি কতটা পোর্টেবল তা নিশ্চিত নয় (ফায়ারফক্স ৩১ এবং ক্রোম ৩ 36 এ কাজ করে) এবং এটি প্রযুক্তিগতভাবে একটি চিত্র ... তবে উত্সটি ইনলাইন এবং সরল পাঠ্য এবং এটি অসীমভাবে স্কেল করে।

@ স্পেনিয়াসটি আবিষ্কার করেছে যে আপনি যদি এটি এনকোড করে বেস 64 করেন তবে এটি IE তে আরও ভাল কাজ করে: https://stackoverflow.com/a/25593531/895245

Comments

মজাদার. আমি এটি কেবল ফায়ারফক্স ৩১-এ কাজ করতে পারি, তবে ক্রোম ৩ or বা সাফারি

— জেপি রিচার্ডসন

@ জেপিআরচার্ডসন সত্য, এখানেও একই। ক্রোম 36-এ আমার ধারণা আছে যে পটভূমিটি রয়েছে তবে খুব ছোট অক্ষরে। সম্ভবত আমি কিছু ব্যাকগ্রাউন্ড / এসভিজি আকারের পরামিতি সেট করতে ভুলে যাচ্ছি?

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件

ইয়া, আমি এই মুহুর্তে এটি নিয়ে পরীক্ষা নিরীক্ষা করছি ... দেখে মনে হচ্ছে "ভিউবক্স"? আমি এখনও এটি সঙ্গে চারপাশে জগাখিচুড়ি করছি।

— জে পি রিচার্ডসন

সিড়ো: আপনার উত্তরের ভিত্তিতে আমি এটিকে একসাথে রাখতে সক্ষম হয়েছি ... বেশ ভাল কাজ করেছে! ধন্যবাদ! codepen.io/jprichardson/pen/GnxKr

— জে পি রিচার্ডসন

@CiroSantilli 事件 事件 2016 六四 事件 法轮功 দুর্দান্ত উত্তর! কীভাবে Chrome এ রেন্ডারিং উন্নত করা যায় সে সম্পর্কে আপনার কোনও ধারণা আছে? এটি দেখতে খুব খারাপ দেখাচ্ছে। অগ্রিম ধন্যবাদ

— আলেজান্দ্রো গার্সিয়া ইগলেসিয়াস

Answer 3

সিউডো উপাদানগুলির আগে বা: পরে কেবল সিএসএস ব্যবহার করে এটি সম্ভব (তবে খুব হ্যাকিশ) হতে পারে:

.bgtext {
  position: relative;
}

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

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

এটি কাজ করছে বলে মনে হচ্ছে, তবে আপনাকে সম্ভবত এটির জন্য কিছুটা টুইঙ্ক করতে হবে। এছাড়াও মনে রাখবেন এটি আই 6 এ কাজ করবে না কারণ এটি সমর্থন করে না :after।

Comments

আপডেট: আপাতত সমস্ত আধুনিক ব্রাউজার ছদ্ম উপাদানগুলিকে সমর্থন করে। উদাহরণস্বরূপ এটি কীভাবে ফন্টআউভস সিএসএস আইকনগুলির জন্য কাজ করে (ব্যবহার করুন: ইনলাইন উপাদানগুলির আগে)।

— Cédric Françoys

কেবল সচেতন থাকুন যে ফায়ারফক্স অনুমতি দেয় না: আগে এবং পরে এমন উপাদানগুলির উপর যা ইনপুট ক্ষেত্রগুলির মতো অভ্যন্তরীণ সামগ্রী থাকতে পারে না। এটি অফিসিয়াল সিএসএস অনুমানকে সম্মান করে।

— নিকোলাস বাউলিয়ান

Answer 4

পাঠ্যযুক্ত একটি এসভিজি ডেটা ইউআরআই পটভূমি সম্পর্কে সিওরোর সমাধানটি খুব চালাক।

তবে, আপনি যদি ইউআরআই ডেটাতে কেবল সরল এসভিজি উত্স যুক্ত করেন তবে এটি আইই তে কাজ করবে না।

এটি পেতে এবং এটি IE9 এবং তার উপরে কাজ করার জন্য, এসভিজিকে বেস 64 এ এনকোড করুন। এটা খুব ভালো একটা যন্ত্র।

সুতরাং এই:

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 সরল, কোনও ত্রুটি নেই, স্বতঃপূরণ, চিত্র পূর্বরূপ। হ্যাঁ, এটি লাফানো এবং সীমানায় ভাল।

— জ্যাক গিফিন

Answer 5

@ সিরো

আপনি ব্যাক-স্ল্যাশ সহ ইনলাইন এসভিজি কোডটি ভাঙ্গতে পারেন "\"

ক্রোম 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>\
");

এবং এটি কাজ করে (কমপক্ষে ক্রোম 54 এবং ফায়ারফক্সে 50 ==> এনডাব্লুজেজেস এবং ইলেকট্রনের গ্যারান্টিযুক্ত ব্যবহারে)

Answer 6

খাঁটি সিএসএস ব্যবহার:

(তবে এটি বিরল ইভেন্টগুলিতে ব্যবহার করুন, কারণ এইচটিএমএল পদ্ধতিটি পূর্বনির্ধারিত উপায় )।

.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

আপনি বিজি পাঠ্যযুক্ত উপাদানটির কম স্ট্যাকিং অর্ডার (জেড-ইনডেক্স, অবস্থান) এবং সম্ভবত অস্বচ্ছতা সেট করে রাখতে পারেন। সুতরাং আপনার উপরে যে উপাদানটির প্রয়োজন হবে তার জন্য একটি উচ্চতর স্ট্যাকিং অর্ডার প্রয়োজন (জেড-সূচক: 5; অবস্থান: আপেক্ষিক; প্রাক্তন) এবং পিছনের উপাদানটির জন্য কিছু কম প্রয়োজন (ডিফল্ট বা কেবল একটি নিম্ন জেড-সূচক 3 এবং অবস্থান: আপেক্ষিক) ;)।

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>