ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

背景样式的案例

2019-04-01 09:59:32  阅读:130  来源: 互联网

标签:repeat 样式 背景 案例 background 属性 背景图片 重复


                      背景样式的案例
开发工具与关键技术:DW html和css
作者:赵纯雨     
年级:18级(5)班
撰写日期:2019年2月15日

背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性,
background-color:背景颜色, background-image:用于设置背景图片。注意:如果同时设置背景颜色(background-color) 和背景图片(background-image),背景颜色会被背景图片覆盖。该属性,需要使用url()函数指定图片地址,图片的地址既可以是相对的,也可以是绝对的。
background-repeat:用于设置对象的背景图片是否平铺(重复显示)。在指定该属性之前,必须先指定背景图片(background-image)该属性有repeat(纵横同时重复),no-repeat(不重复),repeat-x(x轴方向重复),repeat-y(y轴方向重复) 4个值。
background-position:用于控制背景图片的位置。background-position有5个关键字值分别是:top,left,bottom,right,center。可以通过任意两个关键字组合来定位。 也可以通过百分比来定位。例如:background-position:50% 50%.
background:这是一个复合属性,可以同时设置背景颜色、背景图片、背景重复、背景位置等。
CSS3还可以给元素背景添加多个背景图片。
如下图所示:
在这里插入图片描述
在这里插入图片描述

效果图如下:
在这里插入图片描述

标签:repeat,样式,背景,案例,background,属性,背景图片,重复
来源: https://blog.csdn.net/weixin_44540773/article/details/88941491

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有