关于background的问题

关于background的问题

如果CSS采用外部链接的方式 background无法插入背景图是什么原因。插入不显示。但是改成内部样式就没问题

正在回答

登陆购买课程后可参与讨论,去登陆

8回答

同学你好,关于同学的问题解答如下:

1、在同学新复制的代码里面,老师这边测试是可以的。如下(因为老师没有同学的图片,老师就换成了自己的图片):

http://img1.sycdn.imooc.com//climg/5def78670904ce4e11070463.jpg

页面是正常显示图片的:

http://img1.sycdn.imooc.com//climg/5def786a09fed58519200299.jpg

2、同学确定自己的图片路径正确吗,从同学提供的截图来看,同学的html文件和css文件是不在同一个目录的,但是引用图片的路径是一样的:

http://img1.sycdn.imooc.com//climg/5def7ecc09753aa811770087.jpg

同学的文件夹是这样设置的吗:

http://img1.sycdn.imooc.com//climg/5def7fb5093f063505340110.jpg

这样的话在css里面引用图片就应该使用../跳到上级目录来查找图片:

http://img1.sycdn.imooc.com//climg/5def8019099a04a606240049.jpg

同学认真核对一下外部css背景图片的路径引入是否正确。

3、如果还不能解决同学的问题,建议同学将自己的完整代码的粘贴上来,不要截图,不看同学的代码是不知道问题在哪的,只有拿到同学的代码才能看到具体是怎么实现的,问题出在了哪。

4、另外,建议同学新建一个问答进行提问,方便后期的复习。而且老师也能更快的看到同学的问题。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

提问者 用棍棍戳粑粑 2019-12-10 17:10:10

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="css/index-2.css" type="text/css">

    <style>

    body{

    width:1366px;

    margin: 0 auto;

    font:20px "微软雅黑";

    background: rgb(250,250,250) url("image/wallpaper.jpg");

}

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

</body>

</html>

----------------------------------------------分割线----------------------------------------------

我随便又写了一个上述代码

还是不行啊 ,上面的代码如果把BODY写进外部样式图片就无法生效,只有背景颜色生效。   

好帮手慕粉 2019-12-10 16:56:18

同学你好,关于同学的问题解答如下:

1、是等级问题,同学将背景图片设置给了body,在给下面的元素设置背景的时候,就会将body的背景图片覆盖。但是由于同学的代码没有贴全,老师也不知道具体是哪个地方覆盖了背景图,举个例子你可以看一下:

http://img1.sycdn.imooc.com//climg/5def5cdd09d6738e16950535.jpg

http://img1.sycdn.imooc.com//climg/5def5ce40901762c18590516.jpg

而同学直接写在style标签里面能生效就是层级比较高,所以才会生效的。同学可以检查一下是哪个地方将背景图覆盖了。

2、同学如果以后再粘贴代码的话,建议同学直接将代码粘贴上来,不要贴图哦。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 用棍棍戳粑粑 #1
    那就是要加一个z-index可以解决吗?还是说必须把层级高的找出来删掉?
    2019-12-10 17:03:59
  • 提问者 用棍棍戳粑粑 #2
    我又复制简写了一个代码写在下一楼里面的。还是不行
    2019-12-10 17:49:22
提问者 用棍棍戳粑粑 2019-12-10 16:37:01
  • 提问者 用棍棍戳粑粑 #1
    外部样式中不管我把背景图片插入在那个div或者body中只有背景颜色生效。 剪切到内部样式任意div或是body中图片就加载了
    2019-12-10 16:43:15
好帮手慕粉 2019-12-10 15:59:03

同学你好,是同学的样式写错了,在css中设置背景图应该这样写:

http://img1.sycdn.imooc.com//climg/5def50150973ec3b05060066.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 用棍棍戳粑粑 #1
    background: rgb(250,250,250) url("image/wallpaper.jpg"); 我是这样写的。写在link里面 只有背景颜色生效。 我把它剪切到style内部样式里面 F5刷新背景图片就出来了
    2019-12-10 16:02:47
  • 提问者 用棍棍戳粑粑 #2
    是我智障了 还是遇到bug了 上诉操作代码完全没改动 就是剪切到内部样式就好了 纳闷了好久
    2019-12-10 16:08:35
  • 好帮手慕粉 回复 提问者 用棍棍戳粑粑 #3
    同学你好,如果同学的问题没有解决的话建议同学将完整的代码粘贴上来,这样描述老师是不能准确定位问题所在的。如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
    2019-12-10 16:16:23
提问者 用棍棍戳粑粑 2019-12-10 15:51:43

首先外部样式引用是对的。其他样式都能加载出来 只有background-image加载不出来。

提问者 用棍棍戳粑粑 2019-12-10 15:49:09

background{url(11111.jpg);}这个代码 我写在link外部文件里面没有效果。但是背景颜色有效果(只有插入图片无效果)
我把background{url(11111.jpg);}复制到style内部样式里面图片就加在出来了。
不晓得什么原因

好帮手慕粉 2019-12-10 15:46:03

同学你好,建议同学将代码粘贴上来呢,这样老师是不知道问题出的哪的。从同学的描述来看,同学可以检查下css文件有没有成功引入,在设置background-url时有没有设置别的东西。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 用棍棍戳粑粑 #1
    老师您看下。就是link其它样式都能加载出来包括background-color。但是背景图片就是加载不出来。复制到内部样式style就加载出来了。是我哪里写错了还是怎么了
    2019-12-10 15:55:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师