标签：Web repeat color image 25% 011 background css size
1. 概览
| 参数 | 释义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 是否重复 |
| background-position | 定位 |
| background-size（css3 的属性） | 背景大小 举例：background-size:100px 140px; |
2. 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div>
<p class="box1">
001 <br>
</p>
<p class="box2">
002 <br>
</p>
</div>
</body>
</html>*{
width: 400px;
height: 240px;
}
.box1{
background-color: #b35e59;
background-image: url(../img/pic2.jpg); /* 注：此图 200X120 */
background-repeat: no-repeat; /* 不重复 */
background-position: center; /* 图片定位：居中 */
/* 在网页当中让图片或者元素往上移动或者往左移动，需使用负值 */
}
.box2{
background-color: #f1c4be;
background-image: url(../img/pic2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 25% 25%; /* width*25% height*25% */
/*background-size: 100px 60px; 因为数字是凑好的，所以效果与上方一致*/
}- 效果截图
标签：Web,repeat,color,image,25%,011,background,css,size 来源： https://www.cnblogs.com/yorkyu/p/10801857.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。