Có cách nào để sử dụng văn bản làm nền với CSS không?

Question 1

Tôi muốn sử dụng văn bản động làm nền cho các phần tử nhất định trong thẻ của mình. Vì điều này, tôi có thể sử dụng hình ảnh (văn bản động). Làm cách nào để làm điều đó chỉ với CSS hoặc JavaScript?

Question 2

Bạn có thể có một phần tử được định vị tuyệt đối bên trong phần tử được định vị tương đối của mình:

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

Và sau đó là CSS:

#container {
   position: relative;
}

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

Đây là một ví dụ về nó .

Question 3

Hình nền văn bản 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>

Mở rộng đoạn mã

Đây là phiên bản CSS thụt lề để bạn có thể hiểu rõ hơn. Lưu ý rằng điều này không hoạt động , thay vào đó bạn cần sử dụng lớp lót duy nhất SVG từ đoạn mã trên:

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

Không chắc nó có tính di động như thế nào (hoạt động trên Firefox 31 và Chrome 36) và về mặt kỹ thuật nó là một hình ảnh ... nhưng nguồn là nội tuyến và văn bản thuần túy, và nó có tỷ lệ vô hạn.

@senectus nhận thấy rằng nó hoạt động tốt hơn trên IE nếu bạn mã hóa base64: https://stackoverflow.com/a/25593531/895245

Question 4

Có thể có (nhưng rất khó) chỉ với CSS sử dụng các phần tử giả: before hoặc: after:

.bgtext {
  position: relative;
}

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

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

Mở rộng đoạn mã

Điều này có vẻ hiệu quả, nhưng có thể bạn sẽ cần chỉnh sửa một chút. Cũng lưu ý rằng nó sẽ không hoạt động trong IE6 vì nó không hỗ trợ :after.

Question 5

Giải pháp của Ciro về một nền SVG Data URI có chứa văn bản là rất thông minh.

Tuy nhiên, nó sẽ không hoạt động trong IE nếu bạn chỉ thêm nguồn SVG thuần túy vào URI dữ liệu.

Để giải quyết vấn đề này và làm cho nó hoạt động trong IE9 trở lên, hãy mã hóa SVG thành base64. Đây là một công cụ tuyệt vời.

Vì vậy, điều này:

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>');

Trở thành cái này:

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

Đã thử nghiệm và nó hoạt động trên IE9-10-11, WebKit (Chrome 37, Opera 23) và Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

Question 6

@Ciro

Bạn có thể ngắt mã svg nội dòng bằng dấu gạch chéo ngược "\"

Đã kiểm tra bằng mã bên dưới trong Chrome 54 và 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>");
}

Tôi thậm chí đã kiểm tra điều này,

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

và nó hoạt động (ít nhất là trong Chrome 54 & Firefox 50 ==> sử dụng trong NWjs & Electron guarenteed)

Question 7

Sử dụng CSS thuần túy:

(Nhưng sử dụng điều này trong những trường hợp hiếm hoi, vì phương pháp HTML là CÁCH ƯU ĐÃI ).

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

Mở rộng đoạn mã

Question 8

Bạn có thể làm cho phần tử chứa văn bản bg có thứ tự xếp chồng thấp hơn (chỉ số z, vị trí) và thậm chí có thể đặt độ mờ. Vì vậy, phần tử bạn cần ở trên cùng sẽ cần thứ tự xếp chồng cao hơn (chỉ số z: 5; vị trí: tương đối; đối với ví dụ) và phần tử phía sau sẽ cần thứ gì đó thấp hơn (mặc định hoặc chỉ là chỉ số z thấp hơn như 3 và vị trí: tương đối ;).

Question 9

Tôi hy vọng điều này có thể giúp bạn

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

Mở rộng đoạn mã