CSS 入门

第6回背景色与背景图（全16回）

全14回
2018年08月09日发布

啥是 CSS？

CSS的全名是层叠样式表。官方的解释，我就不细说了，因为就算细说了，对新手朋友们来说，听得还是一脸懵逼。那我们就用最通俗的说法来讲，到底啥是CSS？

如果说HTML就是做房子的搭建好的钢筋结构，那么CSS就是做装修。

爱美之心，人皆有之。话说亚洲呢，有三大神术，韩国的整容术、日本的化妆术、还有咱们中国的 PS 术。我们上次学习了HTML基础课程，单纯只用那些标签做出来的东西，确实是非常简陋的。你想让它变得好看，那么对于我们程序员来说，也有一种神术，这就是CSS技术了。

CSS2 与 CSS3

CSS3是新一代的CSS，里面多了很多有用的新特性，例如3D动画、Flex布局等等。光CSS 3这些新知识就足够拆成好几部课程来讲解了。不过无论是哪个版本的CSS，基础部分都是一模一样的。

我们这一次讲的是CSS的基础课程，针对的是只会点HTML标签的新手朋友，所以不会讲那么深入。当然所讲内容也会涵盖部分CSS3的属性。

关于编辑器的选择

依旧还是老三样，课程里我还是继续用WebStorm做演示。

Sublime Text
VS Code
WebStrom

开发浏览器的选择

依然也只推荐Chrome，至于其他的浏览器，非常不推荐开发使用。好了，介绍就这么点吧，还是赶紧进入正题，开始学习CSS的选择器。

CSS 入门（全14回）

这节课，咱们学习下背景色与背景图片的玩法。先用上一节学习的知识，设置一个宽和高。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        div {
            width: 600px;
            height: 600px;
        }
    </style>
</head>

<body>
<div></div>
</body>
</html>

背景色

背景色的用法，非常简单。好了，没了。。。这就是背景色课程的全部内容。

<style>
    div {
        /* ... */
        background-color: #1f99b0;
    }
</style>

CSS的背景色

背景图

还是来看看背景图是怎么玩的吧。先到ITFun.tv上，找到CSS入门课程的图片，右键另存到和index.html同目录的位置。千万不好搞错位置了，不然图片会找不到的。接着将文件名，改为css.jpg。

去掉背景色，添加上边框和背景图片。

<style>
    div {
        width: 600px;
        height: 600px;
        border: 1px solid;
        background-image: url("css.jpg");
    }
</style>

刷新一下，发现背景图片果然能显示了。但是由于我们图片比较小，所以在这个div里，自动的重复了出来。

css图片自动重复

背景图重复

我们尝试设置下背景图重复相关的属性。

<style>
    div {
        /* ... */

        background-repeat: repeat-x;
    }
</style>

css背景图横向重复

刷新下，现在只有横向被重复了。这里的x的意思是在x轴，也就是横向重复。与此相对的，当然还有个repeat-y，这就是纵向重复了。

如果你想让它不重复，当然也有办法的。你需要使用no-repeat，这就是不重复了。

背景图位置

关于图片的位置，还可以进一步调整。

<style>
    div {
        /* ... */

        background-repeat: no-repeat;
        background-position: top right;

        /*background-position: bottom right;*/
        /*background-position: center;*/
        /*background-position: 100px 300px;*/
    }
</style>

css背景图片定位

其实这个属性，也是可以缩写在一行的，平常我们经常也这么干。

<style>
    div {
        /* ... */

        background: url("css.jpg") no-repeat center;
    }
</style>

背景图大小

现在图片比较小，虽然居中了，可是看着还是很奇怪。能不能让图片覆盖整个div的大小呢？

<style>
    div {
        /* ... */

        background-size: contain;
   }
</style>

顾名思义，background-size就是背景图的大小了。contain意思是，等比例的占满整个div。这样做完后，发现上下两边还是有空白。

css背景contain

我们将属性值改为cover，它的意思是完全覆盖背景区域。刷新，发现现在图片占满了整个div了，但是图片的左右两边，有些地方看不见了。

<style>
    div {
        /* ... */

        background-size: cover;
   }
</style>

css背景cover

这些做法，都是为了保持图片等比例缩放，不会变形的常用的设置。如果你说，我不管是否会变形，只要把图片完整的丢在div里面，占满整个框，那也不是不可以。

<style>
    div {
        /* ... */

        background-size: 100% 100%;
   }
</style>

css背景铺满

background-size也是可以缩写到background的，但是注意下，需要先加上一个 /

<style>
    div {
        /* ... */

        background: url("css.jpg") no-repeat center / cover;
   }
</style>

总结

属性名	用法举例	意义
background-color	#1f99b0	背景色
background-image	url("css.jpg")	背景图片地址
background-repeat	no-repeat、repeat-x、repeat-y	背景图重复
background-position	center	背景图片位置
background-size	cover、contain	背景图大小
background	url(html.jpg) no-repeat center / cover	同时设置背景的多个属性

【笔记功能】
上课内容和想要记住的要点，可以很方便的记录在笔记中。
请登录后再使用！

根据会员不同，笔记有不同的数量限制。

免费会员	大会员	线下班会员
5枚	无限制	无限制

升级会员，或者删除笔记可以添加新的笔记。

关闭

CSS 入门

第6回背景色与背景图（全16回）

啥是 CSS？

CSS2 与 CSS3

关于编辑器的选择

开发浏览器的选择

CSS 入门（全14回）

【课程介绍】

【CSS 的基础选择器】

【后代与子类选择器】

【常用的文字样式设置（font）】

【宽、高与边框（width/height/border）】

【背景色与背景图】

【浮动】

【清除浮动与恢复盒子高度】

【内边距（padding）与外边距（margin）】

【块级元素与行内元素】

【相对定位与绝对定位】

【圆角（border-radius）与超出隐藏（overflow）】

【超链接的样式】

【列表（ul、li）】

背景色

背景图

背景图重复

背景图位置

背景图大小

总结

CSS 入门

第6回 背景色与背景图（全16回）

啥是 CSS？

CSS2 与 CSS3

关于编辑器的选择

开发浏览器的选择

CSS 入门 （全14回）

【课程介绍】

【CSS 的基础选择器】

【后代与子类选择器】

【常用的文字样式设置（font）】

【宽、高与边框（width/height/border）】

【背景色与背景图】

【浮动】

【清除浮动与恢复盒子高度】

【内边距（padding）与外边距（margin）】

【块级元素与行内元素】

【相对定位与绝对定位】

【圆角（border-radius）与超出隐藏（overflow）】

【超链接的样式】

【列表（ul、li）】

背景色

背景图

背景图重复

背景图位置

背景图大小

总结

如果您对此课程感到满意，请打赏主讲教师！

第6回背景色与背景图（全16回）

CSS 入门（全14回）