如何在背景中添加文字？
[英]How do I add text to the background?
问题描述
How can you get the text in the background?
你怎么能在后台获取文本？ I would like the title (and other additional text to be in the background) Here is the html code:我希望标题（和其他附加文本在背景中）这是 html 代码：
This is how it looks at the moment, screenshot of not the whole screen, photo resolution 5498x3615这是现在的样子，不是全屏截图，照片分辨率5498x3615
#title { text-align: center; font-family: Playbill; font-weight: normal; font-size: 40px; } .bg_image { overflow: hidden; position: relative; max-width: 100%; height: auto; }
<body> <h1 id="title">Путеводитель по городам</h1> <img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site"> </body>
2 个解决方案
解决方案1
1 2021-11-12 16:40:53
You can set background-image and just put the text on top.您可以设置background-image并将文本放在顶部。 Like this:像这样：
#title { text-align: center; font-family: Playbill; font-weight: normal; font-size: 40px; } body { background-image: url(https://via.placeholder.com/1200x600); background-size: cover; /* Size The Image */ background-position: center; /* Center The Image */ background-repeat: no-repeat; }
<body> <h1 id="title">Путеводитель по городам</h1> </body>
解决方案2
0 2021-11-12 16:55:32
I've got this responsive solution:我有这个响应式解决方案：
* { margin: 0; padding: 0; box-sizing: border-box; } .container { position: relative; } #title { text-align: center; font-family: Playbill; font-weight: normal; font-size: 40px; position: absolute; z-index: 1; top:50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .bg_image { overflow: hidden; position: relative; max-width: 100%; height: auto; display:block; margin: 0 auto; max-width: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div class="container"> <h1 id="title">Путеводитель по городам</h1> <img class="bg_image" src="https://via.placeholder.com/1200x600" alt="background for site"> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何添加背景图像以填充此过渡中的文本？ - How do I add a background image to fill the text in this transition?
如何创建背景图像并在其上添加文本 - How do I create background image and add text over it
如何在图像背景上覆盖文本 - how do I overlay text on an image background
我如何模糊文本后面的背景 - how do i blur background behind the text
如何更改 javascript 中的背景文本 - How do i change the background text in javascript
如何为锚标签添加背景？ - How do I add background to an anchor tag?
如何向背景图像添加超链接？ - How do I add a hyperlink to a background image?
如何在 CSS 中添加背景图像？ - How do I add a background image in CSS?
如何在不使所有内容着色的情况下向文本div添加背景色？ - How do I add a background color to a text div without it coloring everything?
如何在背景图片下添加背景颜色？ - How do I add background color under background image?
相关标签