pre { background-color: #f2f2f2; padding: 10px; font-size: 14px; } p { font-size: 16px; line-height:
在CSS中,不仅可以设置文本样式,还可以设置背景样式。下面是常见的背景属性:
这个属性设置元素的背景颜色。
.box { background-color: #fff; }
这个属性为元素设置背景图片。注意,<img>
标签本身也可以在HTML中设置图片,但是background-image
可以给元素添加复杂的背景效果。
.box { background-image: url('background-image.png'); }
这个属性设置背景图片是否重复显示。
.box1 { background-image: url('background-image.png'); background-repeat: no-repeat; /* 不重复 */ } .box2 { background-image: url('background-image.png'); background-repeat: repeat-x; /* 水平方向重复 */ } .box3 { background-image: url('background-image.png'); background-repeat: repeat-y; /* 竖直方向重复 */ }
这个属性设置背景图片显示的位置。值可以用像素或百分比表示。
.box { background-image: url('background-image.png'); background-position: center; /* 居中显示 */ }
这个属性设置背景图片的大小,值可以用像素或百分比表示。
.box { background-image: url('background-image.png'); background-size: cover; /* 拉伸铺满元素 */ }
粉丝
0
关注
0
收藏
0