CSS实例教程:情况background特性运用

2021-01-20 16:26 jianzhan

情况background:background-image:url("照片的网站地址");情况图background: url(" 照片的网站地址 "); 情况.background-color:#色码;情况颜色. 情况background
css表明
background-image:url("照片的网站地址");情况图
background:url("照片的网站地址");情况
background-color:#色码;情况颜色
Exp:
background-image:url(情况图案设计.jpg,gif,bmp);
background-color:#FFFFFF;
background-color:transparent;<--设置情况为全透明色
--------------------------------------------------------------------------------
background-repeat更改情况照片的反复并排的设置
css
表明
repeat情况照片并排
repeat-x情况照片以X方位并排
repeat-y情况照片以Y方位并排
no-repeat情况照片不以并排的方法解决
Exp:
background-image:url("https://www.jb51.net/xx.gif");
background-repeat:no-repeat;
以https://www.jb51.net/xx.gif这张照片为情况,当照片尺寸不足的情况下,不并排反复
--------------------------------------------------------------------------------
background-attachment是不是固定不动照片部位
css
表明
scroll拉动卷轴时,情况照片会跟随挪动(缺省值)
fixed拉动卷轴时,情况照片不容易跟随挪动
Exp:
background-image:url("https://www.jb51.net/xx.gif");
background-repeat:no-repeat;
background-attachment:fixed;
以https://www.jb51.net/xx.gif情况照片不反复并列,且不随卷轴挪动
--------------------------------------------------------------------------------
以长度精准定位background-position:xy
应用百分比精准定位background-position:x%y%
css
表明
x%往右移
y%往下移
backgroud-position:0%0%;左侧上方
backgroud-position:0P%;左侧正中间
backgroud-position:50%0%;正中间上方
backgroud-position:50P%;中间
backgroud-position:100%0%;右侧上方
backgroud-position:00%;左侧正下方
backgroud-position:100P%;右侧正中间
backgroud-position:500%;正中间正下方
backgroud-position:1000%;右侧正下方
以重要字精准定位
重要字表明
top上(y=0)
center中(x=50,y=50)
bottom下(y=100)
left左(x=0)
Exp:
background-position:center;
照片在特定情况中间X=50%Y=50%部位
background-position:200px30px