Html 无法在css中设置背景图片

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7327011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:30:10  来源:igfitidea点击:

Can't set background image in css

htmlcssbackground

提问by max_

I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?

我正在尝试使用以下代码通过 CSS 设置页面的背景图像,但没有显示图像。图像将平铺在页面上并且只有 10x10px 大。尽管如此,它仍然没有出现。请你能告诉我我做错了什么吗?

<body>
    <div id="background"></div>
</body>


#background {
background-image: url("img/background.png");
}

回答by Nightfirecat

Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.

图片在linkToCssFolder/img/background.png吗?图像路径相对于您的 CSS 文件。

Also, does your #backgrounddiv have content in it? If not, it will probably have the default 0pxheight, and not show any background.

另外,你的#backgrounddiv里面有内容吗?如果没有,它可能具有默认0px高度,并且不显示任何背景。

回答by alex

You need to give the element dimensions too...

您还需要提供元素尺寸...

#background {
   width: 10px;
   height: 10px;
}

Background images do not make their container stretch to fit.

背景图像不会使其容器拉伸以适应。

回答by Farrukh Subhani

Here is a list of all CSS keywords

这是所有 CSS 关键字列表

Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multipleand it works.

刚刚在http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple 上尝试过这个,它有效。

I assume your image is not at right location or if the background property is being over written by style or another css rule.

我假设您的图像不在正确的位置,或者背景属性是否被样式或其他 css 规则覆盖。

回答by Carlo Coronacion

such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.

css 和 html 这样一个简单的东西,由于缺乏适当的注意力和疲倦,即使是专业人士也经常忘记。如果你知道它只是休息一会儿。

here are some tips if you lost in the tree of web design.

如果您迷失在网页设计树中,这里有一些提示。

  1. Check the files if it is there, the file type and support for the file in your browsers
  2. Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
  3. Check your syntax.
  4. rest, take a nap or have a coffee break.
  1. 检查文件是否存在、文件类型和浏览器中的文件支持
  2. 如果您在线,请检查目录,如果您的css和图像文件在不同级别的目录中,则可以放置文件的所有URL或使用“../”。
  3. 检查你的语法。
  4. 休息、小睡或喝杯咖啡。

回答by Saurabh Naikele

Firstly check your CSS and image location 1) Both in same folder then try " background-image: url("background.jpg") " simply. 2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); " 3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back

首先检查您的 CSS 和图像位置 1) 两者都在同一个文件夹中,然后简单地尝试“background-image: url("background.jpg")”。2) 如果您在此文件夹中有 img 文件夹和图像,请尝试“background-image: url("img/background.jpg");” 3)如果您有 img 文件夹并且如果您有 CSS 文件夹,那么您必须去一个退一步然后转到图像文件夹并选择图像,它看起来像这样“ background-image: url("../img/background.jpg"); “其中'..'代表后退一步

回答by A Prakash Reddy

#background {background-image: url("img/background.png"); height:300px;}

add heightelement in css

height在css中添加元素

回答by Alexandru Manole

Hy,

嗨,

to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.

要获取您的图像,您必须想象您在终端(或 cmd 提示符)中并像您一样编写以获取图像。

So let us say that your css file is /css/ and you image is in /img/background.png.

所以让我们说你的 css 文件是 /css/ 而你的图片在 /img/background.png 中。

To get to the image you must write this code background-image: url("../img/background.png");

要获得图像,您必须编写此代码 background-image: url("../img/background.png");

This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!

这是因为在终端/cmd 提示符下,要从 .css 文件获取图像,您将首先键入 cd ..,然后是 cd img,然后是 background.png。希望它会帮助你!

Cheers!

干杯!