css 背景效果_css基础篇06--背景样式

在CSS中,背景样式主要包括背景颜色和背景图像。在传统的布局中,只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来,设置背景样式不再使用传统HTML属性来定义,转而使用无限制、更灵活的CSS来定义。

目标

  • 设置背景颜色
  • 设置背景图片
  • 操作背景图片样式

背景颜色-background-color

在CSS中,使用background-color属性来定义元素的背景颜色。

语法:background-color:颜色值;

说明:颜色值是一个关键字或一个16进制的RGB值。

ff3ebea41120c753d910975964d0733f.png

HTML标签

b38ed71afb874972963c4e46c69407ca.png

背景颜色设置

f3633860e14d9f74dbb61c365f32d3ec.png

效果

背景图像--background-image

在CSS中,使用background-image属性来定义元素的背景图片。

语法:background-image:url("图像地址");

说明:图像地址可以是相对地址,也可以是绝对地址。

注意:给某个元素设置背景图像,元素要有一定的宽度和高度,背景图片才会显示出来。如果设置的元素的宽高过小,背景图片就无法完整地显示出来了。

5854328d47eb59d9f718bcf5eb206513.png

设置背景图片

a62631b8fa5bd3e38fe320cc79085035.png

效果

背景重复样式--background-repeat

在CSS中,使用background-repeat属性可以设置背景图像是否平铺,并且可以设置如何平铺。

语法:background-repeat:取值;

23d3b5793a45795919f75926b4369606.png

取值

当值是repeat,全屏覆盖

b7717bf093cc63c5c031fa9e68ed2e18.png

全屏覆盖

当值是repeat-x,x轴方向覆盖

08e3b5207e5d0daa5c725589af5ae822.png

x轴方向覆盖

当值是repeat-y,y轴方向覆盖

d614f559d36106c771beac714ada47f6.png

y轴方向覆盖

当值是no-repeat,不复制

15b1e10b97341e8d947491c88ea1a883.png

不复制

背景图片位置--background-position

在CSS中,使用background-position设置背景图像的位置

语法:background-positon:像素值/关键字;

说明:语法中的取值包括两种,一种是采用像素值,另一种是关键字描述。

1. 像素值

要设置水平方向数值(x轴)和垂直方向数值(y轴),参数如下

df331f1d148d45a13608ffee7d840647.png

取值

假设设置一个距离左上角水平方向100px,垂直方向100px

8de4d367d4aead859dac23a1fb9e9d46.png

背景图片位置设置

效果如下

34fe2c6f8ce14a474bf88dcaf91136bc.png

效果

2. 关键字

当background-position取值为关键字时,也需要设置水平方向和垂直方向的值,只不过值不是使用px为单位的数值,而是使用关键字代替。

0902915e080d893234212e6e444da4db.png

取值

假设我们要设置一个水平方向、垂直方向都居中的位置,就可以这样设置

975424da35aceeac09cf7c8bc8c3c8d7.png

背景图片位置设置

这样他就永远都处于屏幕的正中间

31a7b65b96427ad73ec06d656f6c57fc.png

效果

背景固定样式--background-attachment

在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动

语法:background-attachment:scroll/fixed;

说明:background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动,是默认选项;fixed表示背景图像固定在页面不动,只有其他的内容随滚动条滚动。

548db6b23eb909a88af1a24e704e4d4a.png

背景固定设置

97780c68b3960ffcd0a2062e854cb1f6.gif

效果

总结

c965df7ce6f64cab7952581a5b0f7254.png

总结

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值