css背景阴影怎么设置(调整页面和块背景)

希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。

  • 【技术等级】初级

  • 【承接文章】《图片在容器中产生的底部间隔,CSS可以巧妙解决,前端原理很重要

本文重点讲解利用CSS技术设置HTML元素的背景,包括背景颜色和背景图片,这样可以让你的页面更加美观。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。

css背景阴影怎么设置(调整页面和块背景)(1)

背景属性是指可以为HTML中的页面、块级元素、内联元素等设置背景外观的效果。这里一定要注意,背景属性并不是只能为页面背景设置的,也可以为HTML文档中任意元素设置背景的。这一组CSS属性包括以下几个:

  • background-color

  • background-image

  • background-repeat

  • background-position

  • background-attachment

一、设置背景颜色:

CSS利用 background-color 属性设置元素的背景颜色

该属性有多种取值:

  • 十六进制颜色代码,例如:background-color:#ff0000。

  • 十进制颜色代码,例如:background-color:rgb(255,0,0)。

  • 带有透明度通道的十进制颜色代码,例如:background-color:rgba(255,0,0,0.3)。

  • 颜色英文单词,例如:background-color:red。

  • 颜色三要素模式代码,例如:background-color:hsl(0,100,100)。

  • 带有透明度通道的颜色三要素模式代码,background-color:hsla(0,100,100,0.3)。

上述取值较为常用的是“十六进制颜色代码”、“带有透明度通道的十进制颜色代码”和“颜色英文单词”。下面列举几个代码实例。

p{background-color:#ff0000;} //设置段落的背景为红色

body{background-color:#cccccc;} //设置整个文档的背景为灰色

二、设置背景图片:

css背景阴影怎么设置(调整页面和块背景)(2)

CSS利用 background-image 属性设置元素的背景图片

该属性的取值格式如下所示:

background-image:url(Image_URL);

该属性需要在 url() 中指定一个图片的路径和文件名,代码示例如下所示。

body{background-image:url(images/back.jpg);

上述代码设置整个页面的背景图片为images文件夹下的名为back.jpg的图片文件

三、设置背景图片的重复平铺方式:

css背景阴影怎么设置(调整页面和块背景)(3)

CSS利用 background-repeat 属性设置背景图片的平铺方式

该属性有多种取值:

  • repeat,默认值,背景图片平铺。

  • no-repeat,背景图片不平铺。

  • repeat-x,背景图片水平平铺。

  • repeat-y,背景图片垂直平铺。

注意:该属性必须结合 background-image 属性共同使用。

四、设置背景图片出现的位置:

css背景阴影怎么设置(调整页面和块背景)(4)

CSS利用 background-position 属性设置背景图片出现的位置

1、可以取值为特定的单词组合。

该种取值可以选取以下几种对齐方式:

  • 水平方向:left(左对齐)、right(右对齐)。

  • 垂直方向:top(顶对齐)、bottom(底对齐)。

  • 居中对齐:center。

上述对齐方式拼凑起来,可以下列形成9种取值方式:

  • top left, 背景图片顶部居左,位于页面的左上角。

  • top center, 背景图片顶部居中,位于页面的上方。

  • top right, 背景图片顶部居右,位于页面的右上角。

  • center left, 背景图片中部居左,位于页面的中部左侧。

  • center center, 背景图片中部居中,位于页面的正中心。

  • center right, 背景图片中部居右,位于页面的中部右侧。

  • bottom left, 背景图片底部居左,位于页面的右下角。

  • bottom center, 背景图片底部居中,位于页面的下方。

  • bottom right, 背景图片底部居右,位于页面的右下角。

注意:若只选取一个对齐方式,则第二个默认为center。

2、可以取值为带有单位的固定坐标值:

格式:background-position:x y;

例如:background-position:100px 300px;

3、以百分比为单位的坐标值:

格式:background-position:x% y%;

例如:background-position:20% 15%;

注意:该属性的使用必须同时具备下列两个条件。

  • 具备background-image属性,也就是必须带有背景图片。

  • background-repeat属性不能取值为repeat,也就是背景图片不平铺。

五、设置背景图片是否固定或随着页面的其余部分滚动:

css背景阴影怎么设置(调整页面和块背景)(5)

该属性有多种取值:

  • scroll,默认值,背景图片随页面的其余部分滚动。

  • fixed,背景图片固定。


文章预告

下一篇文章中,小海老师会以本篇文章讲述的几个属性来带领大家实践一些实例。对于渴望在前端开发道路上前进的你一定不能错过!

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有七八篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。

关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页