ICode9

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

css 背景图片样式

2020-08-12 22:00:49  阅读:492  来源: 互联网

标签:repeat center 样式 top 背景图片 background position css


 

/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
background-image: url(images/l.jpg);
}

/*默认的是平铺图 repeat*/
/*background-repeat: repeat;*/
/*背景图片不平铺*/
/*background-repeat: no-repeat;*/
/*横向平铺 repeat-x*/
/*background-repeat: repeat-x;*/
/*纵向平铺*/
background-repeat: repeat-y;

 

/*背景位置*/
/*background-position: x坐标 y坐标;*/
/*background-position: right top; 右上角*/
/*background-position: left bottom; 左下角*/
/*background-position: center center; 水平居中 垂直居中*/
/*则两个值前后顺序无关 因为是方位名词*/
/*background-position: center left; */
/*如果只指定了一个方位名词,另一个值默认居中对齐*/
background-position: top;

 

/*以下说明 x 10像素 y 垂直居中的*/
/*background-position: 10px center;*/
background-position: center 10px;

 

 

 

/*这种写法一般是我们以后 超大背景图片的做法 背景定位*/
background-position: center top;
/*背景固定的*/
background-attachment: fixed;

 

 

 

height: 3000px;
/*background-color: #ccc;
background-image: url(images/sms.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;*/
/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
background: #ccc url(images/sms.jpg) no-repeat fixed center top;

 

 

background: rgba(0, 0, 0, .2);  背景透明

 

标签:repeat,center,样式,top,背景图片,background,position,css
来源: https://www.cnblogs.com/eric-share/p/13493252.html

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

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

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

ICode9版权所有