目录
一、背景属性
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