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

Question

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

Answer 1

Bạn có thể có một yếu tố hoàn toàn vị trí bên trong của nguyên tố vị trí tương đối của bạn:

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

Và sau đó CSS:

#container { 
    position: relative; 
} 

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

Dưới đây là an example of it.

Answer 2

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

Answer 3

Có thể (nhưng rất hackish) chỉ với CSS sử dụng: trước hoặc: sau khi các yếu tố giả:

<style type="text/css"> 
    .bgtext { 
    position: relative; 
    } 
    .bgtext:after { 
    content: "Background text"; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    } 
</style> 

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

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

Answer 4

Làm thế nào về một hình ảnh nền văn bản SVM 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>

phiên bản thụt vào của CSS để bạn có thể hiểu rõ hơn (điều này không làm việc, bạn cần phải sử dụng lót đơ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>"); 
} 

Không chắc thế nào di động này là (hoạt động trên Firefox 31 và Chrome 36), và nó là kỹ thuật 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ó quy mô vô hạn.

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

Answer 5

giải pháp Ciro về một nền SVG dữ liệu URI có chứa các 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 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. This is a great tool.

Vì vậy, đâ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 này:

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

Tested và nó hoạt động trong IE9-10-11, WebKit (Chrome 37, Opera 23) và Gecko (Firefox 31) .

http://jsfiddle.net/qapp5dLn/

Answer 6

@Ciro

Bạn có thể phá vỡ các mã nội tuyến svg với back-slash "\"

Thử nghiệm với mã dưới đây 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)

Answer 7

Sử dụng CSS tinh khiết:

(Tuy nhiên, sử dụng này trong những dịp hiếm hoi, bởi vì phương pháp HTML được nhiều ưu tiên sau đó điều này).

.container{ 
 
\t position:relative; 
 
} 
 
.container::before{ 
 
\t content:""; 
 
\t width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1; top: 0; left: 0; 
 
\t background: black; 
 
} 
 
.container::after{ 
 
\t 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; 
 
\t animation-name: blinking; 
 
\t animation-duration: 1s; 
 
\t animation-iteration-count: infinite; 
 
\t animation-direction: alternate; 
 
} 
 
@keyframes blinking { 
 
\t 0% {opacity: 0;} 
 
\t 100% {opacity: 1;} 
 
}

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