苏州企业如何建网站,企业网站建设推荐兴田德润,服务网站策划书,简述网站建设的具体步骤背景颜色 图片
插入图片img背景图片 背景图片 3. logo 4. 大图 5. 装饰性小图
便于控制位置#xff01; 插入后会执行自动平铺#xff0c;这与插入图片是不同的#xff01;
div{width: 600px;height: 300px;background-image: url(img/登录用户头像.png);
}小结
盒子的第…背景颜色 图片
插入图片img背景图片 背景图片 3. logo 4. 大图 5. 装饰性小图
便于控制位置 插入后会执行自动平铺这与插入图片是不同的
div{width: 600px;height: 300px;background-image: url(img/登录用户头像.png);
}小结
盒子的第一件事就是设置宽高和位置背景图片的平铺可以设置平铺即repeat也就是重复有4个属性背景颜色在图片下显示
背景位置 - PS对齐方式
比img设置位置要方便地多
在一个盒子中设置图片的位置
水平left、right、center垂直top、bottom、center 注意 我们设置的 background-color是背景颜色 background-image是背景图片 而后面的position和repeat是针对背景图片操作的控制其平铺方式和位置
这些参数控制的不是div盒子的位置是控制盒子内的背景图片的位置。
对于position
一个参数给一个另外一个默认居中如果给center就是中心位置两个参数前后顺序不分针对水平/垂直两个方向 部分前后顺序因为可以通过left识别是水平top是垂直方向 div{/* 以下是操作盒子本身 *//* 给盒子大小 */width: 100%;height: 100px;/* 以下是操作盒子里面 *//* 给背景颜色 */background-color: #D2691E;/* 给背景图片 */background-image: url(img/登录用户头像.png);background-repeat: no-repeat; /* 只显示一个不平铺 *//* 给定图片位置 *//* background-position: center bottom; */background-position: center;background-size: 50px;}内外有别注意是操作盒子还是盒子里面的元素
广义的盒子块级元素以及被赋予块级行为的行内元素都可以作为一个个的盒子。
实例1 针对小图片
h3{/* box */width: 140px;height: 40px;/* text */font-size: 17px;line-height: 40px;font-weight: 400;text-indent: 1.5em;/* background */background-color: wheat;background-image: url(img/登录用户头像.png);background-repeat: no-repeat;background-size: 19px;background-position: left;
}重要的点
知道自己在操作哪个元素知道在哪个盒子里面操作
实例2 针对大图片 页面可能放不开内种
核心要点自适应控制
div{width: 100%;height: 1100px;/* margin: 0; */background-image: url(img/wzry.jpg);background-repeat: no-repeat;background-position: top;
}控制超大图片在任意浏览器都要居中显示。
精确单位 对于bg-position我们需要统一下
参数有两个x坐标 y坐标参数可以是 10pxleft right top center 避免扯犊子的参数20px left两个都设置x坐标……
不同的css参数具备指定功能
例如font-size指定的就是文本而background指定的就是背景在同一个选择器可以一起写。
背景固定 背景色半透明 也允许.3。
仅影响盒子的背景色透明度盒子内容不影响。
背景小结 注意背景主要是两个方面
背景色 颜色不透明度 背景图片大图片小图片控制位置方便 其他各个属性控制的都是背景图片也就是块内的背景图片不能控制文字什么的。 只要能有块行为就可以使用这些比如a标签转换为行内块元素以及p标签……不止是div
