简体   繁体   English

为什么背景图片无法在CSS中显示?

[英]Why won't background-image display in css?

I have a header to which I'm trying to apply a background texture via image file. 我有一个标题,试图通过图像文件应用背景纹理。 The html, css and image files are all in the same directory. html,css和图像文件都在同一目录中。 This is the html: 这是html:

<body>
<div id=header>
  <div id=picture>
    <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>
  </div>
  <div id=caption>
    <h1>BannerText</h1>
  </div>
</div>
</body>

and this is the external style sheet code: 这是外部样式表代码:

#header
{
  background= url('texture.png');
  width:98%;
}

The texture image does not appear. 纹理图像不会出现。 If I use it with the background attribute of the original body tag, that is, 如果我将其与原始body标签的background属性一起使用,即

<body background="texture.png">

that does work. 确实有效。 That tells me it isn't a problem with the url, and all three files are in the same folder so the relative paths are the same in both the html and css files. 这告诉我url没问题,所有三个文件都在同一文件夹中,因此html和css文件中的相对路径都相同。 Why isn't the texture image showing up as the background to the header div? 为什么纹理图像没有显示为标题div的背景?

It's background: url('texture.png'); background: url('texture.png'); , not background= url('texture.png'); ,而不是background= url('texture.png'); .

Also

<img src="picture.jpeg" alt="Profile" align="right" width="180" height="180"/>

Not

<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>

And it's better to wrap attributes values in quotes. 并且最好将属性值括在引号中。 Right - <div id="picture"> , 右- <div id="picture">

bad - <div id=picture> 不好- <div id=picture>

You should change <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/> to <img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/> and in your css should be {background: url('urimageurl.jpg'); 您应该将<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>更改为<img=src=picture.jpeg alt="Profile" align="right" width="180" height="180"/>并且在您的CSS中应为{background: url('urimageurl.jpg'); . Make sure the path/ route (eg http://yourcsspath.come/css/it.css is not going to correspond with ../yourimg.png because it's not the path of route domain!) . 确保路径/路由(例如http://yourcsspath.come/css/it.css不会与../yourimg.png对应,因为它不是路由域的路径!)。 Thanks 谢谢

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM