มีวิธีใช้ข้อความเป็นพื้นหลังกับ CSS หรือไม่?

Question 1

ฉันต้องการใช้ข้อความแบบไดนามิกเป็นพื้นหลังขององค์ประกอบบางอย่างในแท็กของฉัน ด้วยเหตุนี้ฉันจึงใช้รูปภาพ (ข้อความไดนามิก) ได้ ฉันจะทำอย่างไรกับ CSS หรือ JavaScript

Question 2

คุณสามารถมีองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนภายในองค์ประกอบตำแหน่งสัมพัทธ์:

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

แล้ว CSS:

#container {
   position: relative;
}

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

นี่คือตัวอย่างของมัน

Question 3

ภาพพื้นหลังข้อความ SVG

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 เวอร์ชันเยื้องเพื่อให้คุณเข้าใจได้ดีขึ้น โปรดทราบว่าวิธีนี้ใช้ไม่ได้คุณต้องใช้ SVG ซับเดียวจากตัวอย่างด้านบนแทน:

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

ไม่แน่ใจว่าสิ่งนี้พกพาได้แค่ไหน (ใช้งานได้กับ Firefox 31 และ Chrome 36) และในทางเทคนิคแล้วมันเป็นภาพ ... แต่แหล่งที่มาเป็นข้อความแบบอินไลน์และแบบธรรมดา

@senectus พบว่าทำงานได้ดีขึ้นบน IE หากคุณเข้ารหัส base64: https://stackoverflow.com/a/25593531/895245

Question 4

อาจเป็นไปได้ (แต่แฮ็คมาก) ด้วย CSS เท่านั้นโดยใช้องค์ประกอบ: before หรือ: after pseudo:

.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เพราะไม่สนับสนุน

Question 5

วิธีแก้ปัญหาของ Ciro เกี่ยวกับพื้นหลัง URI ของข้อมูล SVG ที่มีข้อความนั้นฉลาดมาก

อย่างไรก็ตามจะใช้ไม่ได้ใน IE หากคุณเพิ่มซอร์ส SVG ธรรมดาลงใน URI ข้อมูล

ในการแก้ไขปัญหานี้และทำให้ใช้งานได้ใน 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, WebKit (Chrome 37, Opera 23) และ Gecko (Firefox 31)

http://jsfiddle.net/qapp5dLn/

Question 6

@Ciro

คุณสามารถทำลายโค้ด svg แบบอินไลน์ด้วย back-slash "\"

ทดสอบด้วยโค้ดด้านล่างใน Chrome 54 และ Firefox 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>\
");

และใช้งานได้ (อย่างน้อยใน Chrome 54 และ Firefox 50 ==> การใช้งานใน NWjs & Electron guarenteed)

Question 7

ใช้ CSS บริสุทธิ์:

(แต่ใช้สิ่งนี้ในบางครั้งที่เกิดขึ้นไม่บ่อยเนื่องจากวิธี 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>

ขยายข้อมูลโค้ด

Question 8

คุณสามารถทำให้องค์ประกอบที่มีข้อความ bg มีลำดับการเรียงซ้อนที่ต่ำกว่า (ดัชนี z ตำแหน่ง) และอาจตั้งค่าความทึบได้ ดังนั้นองค์ประกอบที่คุณต้องการด้านบนจะต้องมีลำดับการซ้อนที่สูงขึ้น (z-index: 5; position: relative; for ex) และองค์ประกอบที่อยู่เบื้องหลังจะต้องมีค่าที่ต่ำกว่า (ค่าเริ่มต้นหรือเพียงแค่ดัชนี z ที่ต่ำกว่าเช่น 3 และตำแหน่ง: สัมพัทธ์ ;).

Question 9

ฉันหวังว่านี่อาจช่วยคุณได้

<!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>

ขยายข้อมูลโค้ด