首页 > html+css >正文

css背景

发布时间：2024-08-06 22:40 作者：一友画

css背景属性

a）背景颜色

语法：background-color: 颜色值

案例：

<style>
div{
   width: 100px;
   height: 100px;
   background-color: red;
}
</style>
<div>盒子</div>

b）背景图片

语法：background-image: url();

案例：

<style>
div{
   width: 100px;
   height: 100px;
   background-image: url(1.jpg);
}
</style>
<div>盒子</div>

c）背景平铺

语法：background-repeat: repeat（平铺）/no-repeat（不平铺）/repeat-x（横向平铺）/repeat-y（纵向平铺）

案例：
```
<style>
div{
   width: 100px;
   height: 100px;
   background-image: url(1.jpg);
   background-repeat: no-repeat;
}
</style>
<div>盒子</div>
```

d）背景大小

语法：background-size: 100px 100px（数值）/100% 100%（百分比）

案例：

<style>
div{
   width: 100px;
   height: 100px;
   background-image: url(1.jpg);
   background-repeat: no-repeat;
   background-size: 100px 100px;
}
</style>
<div>盒子</div>

e）背景定位（位置）

语法：background-position: right top（英文单词）/20px 20px（数值）

案例：

<style>
div{
   width: 100px;
   height: 100px;
   background-image: url(1.jpg);
   background-repeat: no-repeat;
   background-size: 100px 100px;
   background-position: right top;
}
</style>
<div>盒子</div>

f）背景综合写法

语法：background: 颜色图片路径是否平铺定位/大小

案例：

<style>
div{
   width: 100px;
   height: 100px;
   background: #ff0000 url(1.jpg) no-repeat right top/100px 100px;
}
</style>
<div>盒子</div>

g）固定背景

语法：background-attachment: scroll（背景图片随页面滚动而滚动，默认）/fixed（背景图片不会随页面滚动而滚动）/local（背景图片随页面滚动而滚动）

案例：

<style>
div{
   width: 80px;
   height: 80px;
   background: #ff0000 url(1.jpg) no-repeat;
   background-attachment: fixed;
   overflow-y: auto;
}
</style>
<div>盒子<br/>盒子<br/>盒子<br/>盒子<br/>盒子<br/>盒子<br/>盒子<br/>盒子</div>

以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！