房地产微网站建设栏目设计,中英网站的设计,做网站需要招什么职位,用dw做购物网站目录 background 复合属性background-color 背景颜色#xff08;纯#xff09;background-image 背景图片 或者 渐变颜色background-repeat 背景是否重复background-size 设置图片大小background-position 设置背景图片显示位置background-attachment 设置背景图片是否随页面… 目录 background 复合属性background-color 背景颜色纯background-image 背景图片 或者 渐变颜色background-repeat 背景是否重复background-size 设置图片大小background-position 设置背景图片显示位置background-attachment 设置背景图片是否随页面滚动 background 复合属性
background-color 背景颜色纯
.main{width:300px;height:300px;background-color: blue;
}background-image 背景图片 或者 渐变颜色
background-image:linear-gradient(角度(deg)颜色1颜色2, …); 线性渐变渐变方向颜色1-颜色2-… 在背景颜色之上
.main{width:300px;height:300px;background-color: blue; /* */background-image: url(img/R-C.jfif);
}background-repeat 背景是否重复
横向repeat-x, 纵向repeat-y; 默认repeat可设为不重复no-repeat background-repeat:round; 个体完整微调大小 background-repeat:space; 调整空隙
.main{width:300px;height:300px;background-color: rgb(160, 236, 255); background-image: url(img/R-C.jfif); /* */background-size:30%;background-repeat: space;
} background-size 设置图片大小
background-size:宽度高度; 单位可以是像素和百分数。 例如上一个例子中图片太大了我们将图片设置为30%。 background-size:30%;cover 预定义值覆盖根据大小自动变化
background-position 设置背景图片显示位置
background-position: 横向偏移量纵向偏移量; backgound-position-y; y轴 backgound-position-x; x轴 默认显示左上角00;
background-attachment 设置背景图片是否随页面滚动
background-attachment:scroll; 滚动(默认) background-attachment:fixed; 固定 下面是固定模型的效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{padding:0;margin:0;}body{width:100%;}.zw{height: 500px;}.box{width:100%;background-image: url(1.jpg);background-attachment:fixed; height: 300px;}/style
/head
bodydiv classzw占位置/divdiv classzw占位置/divdiv classbox/divdiv classzw占位置/divdiv classzw占位置/div
/body
/html
