[英]I insert a background-image in my HTML page but it does not show
我写了下面的HTML代码,插入了一张jpg图片,但是为什么页面渲染后图片没有出现?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.image { background-image: url("images/bg1.jpg"); } </style> </head> <body> <p class="text1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, iste?</p> <div class="image"></div> <div class="text2">Lorem ipsum dolor sit amet.</div> </body> </html>
根据这个答案,使用 CSS 可能会有所帮助: https : //stackoverflow.com/a/10833692/5968663
<style>
<div class="image"></div>
</style>
像这样使用 CSS:
div.image {
content: url("images/bg1.jpg");
}
默认情况下, div
跨越其容器的整个宽度,但高度为零,除非其中有一些内容。 目前您的div.image
高度为零。 为div.image
指定一个高度,例如height: 100px
或在其中放置一个子元素。
你应该给HTML
, BODY
和div.image
一个min-height: 100vh
,那么你的背景图片也应该是可见的。
如果你真的想让它作为网站背景,你还应该设置position: absolute; top:0;left:0
position: absolute; top:0;left:0
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.