0基础学习网页结构编程

0基础学习网页结构编程写法一:left,right,top,bottom,center通过这几个方位词来调整图片的位置;border-box默认值,背景色出现在边框下面

0基础学习网页结构编程

目录

一、背景属性

1、添加背景色

2、添加背景图片

3、图片虽小于盒子,但我只要一张

4、调整背景图片在元素中的位置

5、background-cilp设置背景色的范围

6、background-origin

7、background-size设置图片大小

8、background简写


一、背景属性

1、添加背景色

background-color:;

2、添加背景图片

background-img:url();
url()指向图片引入的路径
如果引入的图片小于盒子,图片默认会铺满
如果引入的图片大于盒子,图片默认显示的是左上角

3、图片虽小于盒子,但我只要一张

backgroun-repeat:no-repeat;
可选值:
repeat          铺满
no-repeat   不铺满,一张
repeat-x      水平方向平铺
repeat-y      垂直方向平铺

4、调整背景图片在元素中的位置

background-position:;
参数:参数之间空格隔开
参数1    水平方向位置
参数2     垂直方向位置
例background-position:left bottom;左下角

写法一:left,right,top,bottom,center通过这几个方位词来调整图片的位置;
注意:参数2不写的话默认是center

写法二:直接写大小
background-position:100px 100px;
注意:参数2不写的话默认是center

5、background-cilp设置背景色的范围

可选值:
border-box     默认值,背景色出现在边框下面
padding-box   背景色出现在内边距和内容区
content-box    背景色出现在内容区

6、background-origin

设置背景图片的偏移量计算的原点,配合偏移量使用
可选值:
padding-box   默认值,内边距最外面为原点
conten-box     以内容区为原点
border-box     以边框为远端

7、background-size设置图片大小

参数:
第一个值:宽度
第二个值:高度
如果只写第一个,第二个auto,图片自适应大小

cover      图片比例不变,元素铺满
contain   图片比例不变,图片完整显示

8、background简写

~通过该属性可以同时设置所有背景相关的样式

~没有顺序的要求,谁在前后都行
也没有数量的要求,不写的样式就是默认值

~size要写在position后面

今天的文章0基础学习网页结构编程分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/63827.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注