CSS3-background的基本用法

来源：互联网发布：我的世界多核优化编辑：程序博客网时间：2024/06/03 22:56

<!DOCTYPE html><html><head><meta charset="utf-8"><title>单一样式</title><style>    *{margin:0px;padding: 0px;}    .box-top{width: 50%;height: 400px;background-color: #ccc;margin: 1% auto;background-image: url(1.jpg) ;background-repeat: no-repeat;background-position: 100px 100px; background-size: contain}    /*        下面的都叫做单一样式        background-image: url(1.jpg)   默认状态下会平铺当前容器下的四周空间        background-repeat:有三个取值        no-repeat 不平铺        repeat-x 平铺x轴方向        repeat-y 平铺y轴方向        background-position:        前后取值对应 x轴 y轴         可以是px的值 如 100px 100px        也可以是，x轴  left|center|right      y轴   top|center|bottom        它在底层方面实现了可以把x轴和y轴自动识别,如top left 和 left top是一个效果。        background-size:        取值可以是        length直接是像素 对应宽度和高度的长度如  100px 100px;如果只提供一个值，第二个值会被设置为auto        percentage百分比 对应宽度和高度的长度如 20% 20% ;如果只提供一个值，第二个值会被设置为auto        cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。        contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。    */</style></head><body><div class="box-top"></div></body></html>

<!DOCTYPE HTML><html><head>    <title>复合样式</title>    <meta charset="utf-8">    <style>        *{margin:0px;padding: 0px}        .box-top{width: 60%;height: 3000px;background: url(1.jpg) no-repeat fixed #ccc center top;background-size: contain}        /*            在这里background-size不能写在backgound复合样式里面。因为position和size都可以是length(直接写宽高多少像素)            写backgound-size要另外写        */    </style></head><body>    <div class="box-top"></div></body></html>

0 0