简单搭建网站
从零开始学习

css背景(background)

css背景由background定义,用于定义html元素的背景

请先了解下面html的文章再学习css

css背景颜色(background-color)

背景颜色就是定义一个html颜色的背景颜色,颜色名就和前面的html颜色是同一个写法,直接写颜色英文或者颜色的16进制名字

#css背景颜色#
选择器{
background-color:颜色名;
}

body背景颜色示例

提示:你可以先修改部分代码再运行。

不同元素背景颜色示例

提示:你可以先修改部分代码再运行。

css背景图像(background-image)

#css背景图像#
选择器{
background-image:url('图像地址');
}

背景图像示例

提示:你可以先修改部分代码再运行。

css背景图像平铺(background-repeat)

默认的背景图像会像水平或者垂直平铺,你可以根据你的背景图像来调整背景平铺的方式

效果
repeat这是默认的平铺效果
repeat-x只会向水平位置平铺图像
repeat-y只会向垂直位置平铺图像
no-repeat不平铺图像
inherit从父元素继承平铺属性
#背景图像平铺方式#
repeat{
平铺方式
}

不平铺背景图像示例

提示:你可以先修改部分代码再运行。

平铺方式我就不一一给大家都示例了,大家看表格的值依葫芦画瓢就行了

css背景图像滚动(background-attachment)

效果
scroll随着页面的滚动而滚动(默认)
fixed不会随着页面的滚动而滚动
local随着元素的滚动而滚动
initial设置属性默认值
inherit从父元素继承
#背景滚动#
选择器{
background-attachment:滚动属性;
}

设置背景不随着页面滚动而滚动

提示:你可以先修改部分代码再运行。

同平铺方式一样,请大家依葫芦画瓢

css背景图像定位(background-position)

下面表格的定位都是从x和y来定位就是水平面和垂直两个属性

效果
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
只设置一值的话另一个值为center
x%y%只设置一个值的话另一个值为50%
xpos ypos只设置一个值的话另一个值为50%
inherit继承父属性
#关键字定位#
选择器{
background-position:关键词 关键词,
}
#百分比定位#
选择器{
background-position:数值% 数值%;
}
#像素定位#
选择器{
background-position:数值px 数值px;
}

定位背景图像示例

提示:你可以先修改部分代码再运行。

这个也是照葫芦画瓢就可以完成,难度比前面大一点点,不过理解一下x和y是水平和垂直你就会瞬间明白,比如左上角用百分比来定位的话就是(0% 0%),用像素来定位的话就是(0px 0px),又比如右下角用百分比来定位就是(100% 100%),一定要理解水平和居中的涵义

本篇内容可能需要你多次练习才能理解其中涵义,因为太多实例我一个人实属懒得写,所以就让大家理解一下涵义依葫芦画瓢吧

赞(3) 打赏梁某人
未经允许不得转载:每篇文章都是博主的心血,偷盗文章事最可耻的事情梁某人的个人网站 » css背景(background)

发表评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

梁某人的个人网站

免费云存储免费云存储

靓仔!打赏一元试试看啊

支付宝扫一扫打赏

微信扫一扫打赏