【问题标题】:CSS background-image - What is the correct usage?CSS background-image - 正确的用法是什么?
【发布时间】:2010-10-25 12:03:20
【问题描述】:

CSS background-image 属性的正确用法是什么? 我想了解的关键是

  1. 是否需要用引号括起来,即:background-image: url('images/slides/background.jpg');
  2. 可以是相对路径(如上)还是必须是完整的 URL?
  3. 我应该注意的任何其他点,以确保它在符合标准的浏览器中正常工作。

【问题讨论】:

标签: css


【解决方案1】:

如果说使用你的css文件中的图像,你真的不需要引号

{background-image: url(your image.png/jpg etc);}

【讨论】:

    【解决方案2】:

    像下面这样写在你的css文件中

    background:url("images/logo.jpg")
    

    【讨论】:

      【解决方案3】:

      只需检查图像所在的目录结构,假设您在 css 文件夹之外有一个 css 文件夹和 images 文件夹,那么您将不得不使用“../images/image.jpg” 只要确保目录结构,它就会像对我一样工作。

      【讨论】:

        【解决方案4】:

        如果您的图片位于 css 文件的单独目录中,并且您希望相对路径从您网站的根目录开始:

        background-image: url('/Images/bgi.png');
        

        【讨论】:

        • 我来不是在寻找我可以使用相对路径吗...我在寻找如何使用相对路径...+1 以明确路径的开始位置。跨度>
        【解决方案5】:

        路径可以是完整的或相对的(当然,如果图像来自另一个域,则它必须是完整的)。

        您不需要在 URI 中使用引号;语法可以是:

        background-image: url(image.jpg);
        

        或者

        background-image: url("image.jpg");
        

        但是,来自W3

        出现在不带引号的 URI 中的某些字符,例如括号、空格字符、单引号 (') 和双引号 ("),必须使用反斜杠进行转义,以便生成的 URI 值是 URI 标记:'\ (', '\)'。

        因此,在此类情况下,必须使用引号或双引号,或者转义字符。

        【讨论】:

          【解决方案6】:
          1. 不,你不需要引号。

          2. 是的,你可以。但请注意,相对 URL 是从样式表的 URL 解析的。

          3. 最好不要使用引号。我认为有些客户不理解他们。

          【讨论】:

            【解决方案7】:

            1) 加引号是个好习惯

            2) 可以是相对路径,例如:

            background-image: url('images/slides/background.jpg');
            

            将在加载 css 的文件夹中查找 images 文件夹。因此,如果图像在另一个文件夹中或 CSS 文件夹树之外,您应该使用绝对路径或相对于根路径(以 / 开头)

            3) 您应该对 background-image 使用完整的声明,以使其在符合标准的浏览器中表现一致,例如:

            background:blue url('/images/clouds.jpg') no-repeat scroll left center;
            

            【讨论】:

            • 你的意思是background而不是background-image吗?
            • 因为有时图像名称或路径名称中有空格,这可能会导致问题。
            • @TheVillageIdiot 仍然在第三行,它的background-image 不应该是@Gumbo 建议的background
            【解决方案8】:

            相对路径很好,不需要引号。另一件有用的事情是使用“速记”background 属性来指定背景颜色,以防图像无法加载或由于某种原因不可用。

            #elementID {
                background: #000 url(images/slides/background.jpg) repeat-x top left;
            }
            

            还请注意,您可以指定图像是否重复以及沿哪个方向重复(如果不指定,则默认为水平和垂直重复),以及图像相对于其容器的位置。

            【讨论】:

              【解决方案9】:

              查看background-imageURIs 各自的站点参考页面

              1. 它不必用引号引起来,但如果您愿意,可以使用它们。 (我认为 IE5/Mac 不支持单引号)。
              2. 相对和绝对都可以;相对路径是相对于 css 文件的路径。

              【讨论】:

                【解决方案10】:

                你不需要使用引号,你可以使用任何你喜欢的路径!

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 2013-02-17
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2018-03-15
                  • 2011-07-13
                  相关资源
                  最近更新 更多