那必须的！ 今天我们要讲的是CSS也就是那个让网页变好看的东西。很多人问我，怎么把网页搞得花花绿绿的？怎么把图片放上去？其实很简单，就是设置一下背景嘛。这篇博客详细介绍了如何使用CSS设置网页元素的背景,包括背景颜色、 背景图像的添加、图像平铺的不同属性值、调整背景图像的位置以及实现背景图像的固定显示.注意:背景图片会覆盖背景颜色.一边,还讲解了如何综合设置元素的背景,利用复合属性一次性完成所有设置。

一、 用CSS设置颜色与背景.background-color属性用于设置HTML元素的背景颜色.

妥妥的！ 先说说我们要知道，网页是有颜色的。默认是白色的，很无聊。我们可以用CSS把它变成别的颜色。在CSS中， 网页元素的背景颜色使用background-color属性来设置,其属性值与文本颜色的取值一样,可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb.body{background-color:#CCC;}/*设置网页的背景颜色*/.

尊嘟假嘟？ 你看，就像上面那个代码，`#CCC`就是灰色。你也可以写`red`，或者`blue`，或者`rgb`。反正就是怎么高兴怎么来。但是要注意，如果你设置了背景图片，图片会把颜色盖住。注意:背景图片会覆盖背景颜色.这个一定要记住 不然你设置了半天颜色，后来啊被图片挡住了还以为代码写错了那就搞笑了。

1.1 颜色的那些事儿

用CSS设置背景颜色和图像的方法:1、 通过background-color属性设置背景颜色;2、通过background-image属性设置背景图像。.使用CSS设置背景我...

其实颜色有很多种写法。比如你想设置一个红色背景， 你可以写：

background-color: red;，何不...

或者：

background-color: #ff0000;

这三种都是一样的，看你喜欢哪个。反正我觉得十六进制最常用，虽然记不住但是可以复制粘贴嘛。 将心比心... 常用值包括十六进制、RGB、颜色名称等。随便你选。

二、 如何设置标签的背景颜色.background-image:背景图片.背景background可以设置对象纯色的背景颜色,设置图为背景.

翻车了。 说完了颜色，我们来说说图片。图片才是背景的灵魂啊。没有图片的网页就像白开水，没味道。如何设置标签的背景颜色.background-image:背景图片.背景background可以设置对象纯色的背景颜色,设置图为背景.

你要用`background-image`这个属性。它的值一般是`url`。比如：，很棒。

background-image: url;

这样设置这个图片为背景图片靠网页顶部水平平铺,背景为白色,这里注意不出来会显示个破图标，很难看。所以路径一定要对，躺平...。

2.1 图片平铺的问题

太水了。 默认情况下 你的背景图片会像铺地砖一样，一张接一张地铺满整个屏幕。这叫平铺。有时候我们不想这样，只想显示一张图。那就要用`background-repeat`属性。

~background-repeat~属性决定了背景图像如何重复.

它有几个值：

• repeat: 默认的，平铺。
• no-repeat: 不平铺，就一张。
• repeat-x: 只有水平方向平铺。
• repeat-y: 只有垂直方向平铺。

不忍直视。 如果不需要背景图重复，可以加上：background-repeat: no-repeat; 这样图片就老老实实待在那儿了。

三、使用CSS设置背景颜色与图像第九讲扁平工作汇报通用模版回顾01CSS中如何设置图片代替文本02图文混排中,使用哪个CSS属性可以实现03CSS中剪切图片的思路是如何呢目录CONTENTS01背景颜色给页面分块背景图片的设置背景图像替换滑动门 使用CSS样式表设置背景颜色与图像

这一段话是不是看起来很乱？没错，这就是我们要讲的重点。有时候我们做网页，特别是做那种扁平化的模版，经常要用到背景图片来代替文本。比如一个按钮，我们不想用文字，想用一张图片做按钮，这就涉及到图片代替文本了。CSS中剪切图片的思路是如何呢？其实就是用背景图把文字盖住或者把文字移出去，何不...。

本文来源:齐齐文库|时间:2025-02-15|页数:17|评分:4.15分|举报 举报当前文档 若此文档侵犯了您的权益,请提交您的举报信息。 盗版或者侵权若此 换个角度。 发现360文库平台上海合作作方上传的内容,侵犯了您作品的信息网络传播权等合法权益时,请按照平台 侵权处理要求要求通知我们! 广告或者垃圾信息 色情、 淫秽...

有啥用呢？ 上面这段是我在网上复制的，你看，网上很多资料都是这样乱七八糟的。我们要学会从这些乱七八糟的东西里找到有用的信息。比如背景颜色给页面分块，这个思路就很好。我们可以把网页头部设成一个颜色，中间设成另一个颜色，底部再来一个颜色。这样页面就有层次感了。

四、 在CSS中设置背景图片与背景颜色，可以通过 background 或更具体的 background-image 和 background-color 属性来实现。你可以单独设置，也可以组合使用。

这里有个高级技巧，就是简写属性。如果你不想写那么多行代码，可以把它们都写在一个`background`属性里。 醉了... 这样设置background背景颜色即可.对body设置背景图片水平平铺。

直接使用 background 简写属性：

害... background: #e0e0e0 url no-repeat center center;

这段代码设置了：颜色是`#e0e0e0`， 图片路径是空的，不平铺，居中。是不是很方便？ 太扎心了。 但是顺序不能乱，虽然有时候乱了也能显示，但是最好还是按规矩来。

盘它。 一边,body元素的背景设置如下: ~~~cssbody{ background-image: url; background-repeat: no-repeat; background-position: bottom; background-color: transparent; background-size: ....文章浏览阅读873次。一边设置背景图和背景颜色顺序如下:背景图片,尺寸,背景颜色 background: url no-repeat center; background-size: 16px 16px; background-color: #5696ff;顺序颠倒则只显示图片..._html 预览png 方块背景样式 html块...

躺平... 你看这里又有一个例子。`background-size`这个属性也很重要，它决定了图片的大小。

4.1 调整图片大小

有时候你的背景图太大，或者太小，怎么办？用`background-size`。

background-size: cover; —— 图片覆盖整个容器，保持比例。这个最常用，做全屏背景图必备，绝了...。

background-size: 100% 100%; —— 拉伸填满。这个会把图片拉变形，慎用，当冤大头了。。

background-size: conta 打脸。 in; —— 把图片完整显示出来可能会有留白。

4.2 调整图片位置

图片不想在左上角，想挪个地方？用`background-position`。

background-position: 摸个底。 center; —— 定位图片位置，居中。

你也可以写具体的数值，比如`10px 20px`，或者`top right`。 别怕... 反正就是怎么调怎么来。

4.3 背景固定

加油！ 这个效果很酷。当你滚动网页的时候，背景图不动，只有字在动。这叫视差滚动效果。

background-attachment: fixed; —— 背景固定，滚动时图片不动。

加上这个属性，你的网页瞬间就高大上了。

五、对于图片的使用,其实更多的是在内容层。根据WEB标准的思路,表现层的图片,已经都被分离到CSS中去了。只有作为内容的图片才能以IM......

这里要讲一点理论了。虽然我很讨厌讲理论，但是为了凑字数...哦不为了让大家更专业，还是得讲讲。

以前我们做网页，图片都直接写在HTML里用``标签。但是现在讲究结构和表现分离。那些装饰性的图片，比如圆角、阴影、图标，都应该放在CSS里做背景。只有那些真正有用的图片，比如新闻配图、产品照片，才用``标签。这就是WEB标准的思路。表现层的图片,已经都被分离到CSS中去了。只有作为内容的图片才能以IM......，躺赢。。

换个角度。 这样做的好处是HTML代码很干净，加载速度快，SEO也友好。搜索引擎喜欢干净的代码。

六、一下

大体上就这些。合理搭配背景颜色和图片，能增强页面层次感，一边保证在图片未加载时也有良好显示效果，牛逼。。

我们回顾一下：

1. 颜色用`background-color`。
2. 图片用`background-image: url`。
3. 平铺用`background-repeat`。
4. 位置用`background-position`。
5. 大小用`background-size`。
6. 固定用`background-attachment`。
7. 偷懒用`background`简写。

本文介绍了如何使用CSS设置背景颜色和背景图像,包括如何定位背景图片以及如何实现背景图片固定不变的效果。 换言之... .1.设置背景颜色2.设置背景图片3.设置背景图像位置4.设置背景图片位置固定1.设置背景颜色.

希望大家都能学会，做出漂亮的网页。如果还有不懂的，就去百度一下或者看那些乱七八糟的文档，就像我开头贴的那样，总能找到答案的。加油吧，打工人，简直了。！

---