老师帮我检查下遇到些疑惑

<!DOCTYPE html>

<html>

<title>background属性</title>

*{margin: 0;padding: 0;}

div:first-child{

width: 800px;

height: 400px;

padding: 20px;

border: 20px solid rgba(255, 0, 0, 0.5);

background-origin: padding-box;

background-clip: content-box;

background-size: 90%;/*我审查元素看了下为啥从这上面三条都不生效 */

background: url(http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg) no-repeat center center #999;

/* 还有这边的url 括号里到底要不要加''标点符号我加了为啥报错可是课件里的老师都是加的 */

}

/* div:last-child{

position: absolute;

width: 800px;

height: 400px;

top: 0;left: 0;

border: 20px solid rgba(255, 0, 0, 0.5); */

/* 老师我这边不想多写一个div 就想用一个div写两个div发现内边距不生效不知道为啥，我就用会一个div了 */

}

</style>

</head>

<body>

<div>慕课网（IMOCC）国内最大的IT技能学习平台</div>

</body>

</html>

豆包侠 2021-10-19

源自：CSS3背景与渐变 2-15 编程练习

收起

1回答

好帮手慕久久 2021-10-19 13:50:41

同学你好，与代码相关的疑惑，解答如下：

如下位置，有一个“}”没有注释掉，为了防止它对其他代码产生干扰，先将其注释掉：

1、background是一个复合属性，它包含了background-origin、background-clip、 background-size等属性，因此如下这样写，会把之前设置过的background-origin、background-clip、 background-size覆盖掉，导致之前写的相关属性不生效：

建议使用background-image设置背景图：

另外，建议按照效果图，补上如下属性：

2、url 括号里面，可以写引号，也可以不写引号，老师测试，写上引号不会报错：

同学检查一下，看自己哪里写错了。

3、使用两个div实现，padding其实是生效的：

只是用两个div实现效果，会麻烦些，建议使用一个div实现。

代码中还有一个问题：

background-clip属性，用来设置背景的绘制区域，不是background-origin，因此调整如下：

祝学习愉快！

收起回答

提问者豆包侠 #1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        div:first-child{
            width: 800px;
            height: 400px;
            padding: 20px;
            border: 20px solid rgba(255, 0, 0, 0.5);
            background-clip: padding-box;
            background-size: 90%;
            background-image: url(http //climg .mukewang .com/ 582c 39c 1091605000150jpg);
            background-repeat:no-repeat;
            background-position:center center;
            
        }
        
</style>
</head>
<body>
  <div>慕课网（IMOCC）国内最大的IT技能学习平台</div>
  
</body>
</html>

老师这边我按照你说的更改了但是灰色背景我用background-color:#999;写出来就覆盖了这边要怎么写呢另外为啥

background-repeat:no-repeat;

background-position:center center;

}

这三行最后都红色波浪线像是有问题

2021-10-19 14:11:16

好帮手慕久久回复提问者豆包侠 #2

同学你好，解答如下：
1、背景图路径书写的不对，比如存在多余的空格，所以两个属性有红色波浪线：
正确路径如下：
http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg
2、background-image和background-color不会相互覆盖，例如：

建议同学把url地址改对了，再看看效果。
祝学习愉快！

2021-10-19 15:35:46